P09:Next.js教程-如何使用和自定义Head 对SEO更友好

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

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

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

function Header(){ 
    return (<div>mybj123.com</div>)
}
export default Header

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

import Head from 'next/head'
function Header(){ 
    return (
        <>
            <Head>
                <title>码云笔记是最胖的!</title>
                <meta charSet='utf-8' />
            </Head>
            <div>mybj123.com</div>

        </> 
    )
}
export default Header

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

Next.js教程-自定义Head 更加友好的SEO操作

方法2:定义全局的<Head>

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

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

import Head from 'next/head'

const MyHeader = ()=>{
    return (
        <>
            <Head>
                <title> mybj123.com </title>   
            </Head>
        </>
    )
}

export default MyHeader

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

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

总结

本文主要是讲了Next.js<Head>标签如何使用和自定义,这个在工作中的每个页面都会用到,所以你一定要学会哦。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:Next.js教程-如何使用和自定义Head 对SEO更友好

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们