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
。
方法 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>
标签如何使用和自定义,这个在工作中的每个页面都会用到,所以你一定要学会哦。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P09:Next.js教程-如何使用和自定义Head 对SEO更友好
码云笔记 » P09:Next.js教程-如何使用和自定义Head 对SEO更友好