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

向右看齐 2023-10-06 21:02 18阅读 0赞

#### 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