0
点赞
收藏
分享

微信扫一扫

P09:如何使用和自定义Head 对SEO更友好


Next.js 教程

  • ​​阐述​​
  • ​​方法1:在各个页面加上 `` 标签​​
  • ​​方法2:定义全局的 ``​​

阐述

既然用了Next.js框架,你就是希望服务端渲染,进行SEO操作。那为了更好的进行SEO优化,可以自己定制 ​​<Head>​​ 标签,定义一般有两种方式,本文带大家学习一下。

方法1:在各个页面加上 标签

先在 ​​/pages​​​ 文件夹下面建立一个 ​​header.js​​ 文件,然后写一个最简单的Hooks页面,代码如下:

function Header(){ 
return (<div> willem </div>)
}
export default Header

引入 ​​next/head​​ 后你就可以写一些列的头部标签了,全部代码如下:

import Head from 'next/head'
function Header(){
return (
<>
<Head>
<title>welcome to node!</title>
<meta charSet='utf-8' />
</Head>
<div> willem </div>

</>
)
}
export default Header

这时候再打开浏览器预览,你发现已经有了 ​​title​​。

方法2:定义全局的

这种方法相当于自定义了一个组件,然后把 ​​<Head>​​​ 在组件里定义好,以后每个页面都使用这个组件,其实这种方法用处不大,也不灵活。因为Next.js已经把 ​​<Head>​​ 封装好了,本身就是一个组件,我们再次封装的意义不大。

比如在 ​​components​​​ 文件夹下面新建立一个 ​​myheader.js​​,然后写入下面的代码:

import Head from 'next/head'

const MyHeader = ()=>{
return (
<>
<Head>
<title> willem </title>
</Head>
</>
)
}

export default MyHeader

这时候把刚才编写的 ​​header.js​​​ 页面改写一下,引入自定义的​​myheader​​​,在页面里进行使用,最后在浏览器中预览,也是可以得到​​title​​的。

import Myheader from '../components/myheader'
function Header(){
return (
<>
<Myheader />
<div> willem </div>
</>
)
}
export default Header


举报

相关推荐

0 条评论