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

Posted 2022-01-08 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了P09：如何使用和自定义Head 对SEO更友好相关的知识，希望对你有一定的参考价值。

Next.js 教程

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

阐述

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

方法1：在各个页面加上 `<Head>` 标签

先在 /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>`

这种方法相当于自定义了一个组件，然后把 <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