网站的SEO优化

什么是SEO

搜索引擎优化，又称为SEO，即Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

良好的代码编写规范

Meta标签

Meta标签为网站的元标签，我们可以再网站的head中添加他，通常用来向爬虫声明网站信息，我在日常的开发中都会开发这个这样的组件用来快速编写meta标签通常情况下我们只需要编写keyword(Google声明不在判断，但是最好还是写一下)、description，一个用来写网站关键词，一个用来编写网页介绍，同时我们不要忘记使用title。

代码语义化

对于需要SEO的网站网站开发语义化非常重要，例如h1-h6标签的使用，HTML5中header、nav、footer、time、article、aside等语义化标签，在编写a标签以及img标签时需要补充title、alt等属性。

外部

sitemap

很多时候搜索引擎无法快速的获取网站中需要抓取的全部链接，我们可以编写xml文件(不限于xml，不过xml兼容性最好)来告诉搜索引擎。 类似这样我在我的sitemap中进行了分页处理具体可以参考:如何编写sitemap。

robots.txt

在网站开发中robots.txt文件是必不可少的，我们可以再其中编写那些网站是可以抓取(Allow)的那些是不能抓取的(Disallow)同时可以填写上面所说的sitemap.xml以及限制搜索引擎爬虫。

开通站长管理平台

百度和谷歌都有属于自己的站长管理平台，在搜索框输入site:XXXX.com就可以查询自己网站被收录的情况，例如site:example.com，在站长平台我们可以看到网站的访问情况，以及出现的问题和爬虫抓取情况。

Google:Google Search Console

百度:搜索资源平台

内容

网站的主要内容对于SEO非常重要，在首页你需要有一定数量的关键词以及网站介绍不能使用过多的大图片从而导致了搜索引擎能抓取到的文字太少。同时不能有太多多余的文字，多余的文字请通过CRS渲染但是不能在用户首屏有着太多的布局偏移。如果你是使用了主要前端框架的SSR请求不要在服务器生命周期中请求太多的文字内容。

在不重要的页面可以适当的使用SSG。同时需要明确分清网站想要展示的内容，对于不重要的链接或者外站在a标签上使用nofollow以及noreferer告知搜索引擎。

链接

这里的链接指友情链接和外部链接，你可以再各大符合你网站主题的论坛上发布一些你想要的链接，同时你需要单独开设一个页面或者做一个独立的模块用来存储友情链接，交换的友情链接一定要是和你的网站主题相差不大的网站。

网站响应速度

如果你的网站响应速度非常的慢不仅用户体验不好，对于爬虫也会认为你的网站性能不好很可能会放弃本次抓取看，我们最好将网站请求的响应时间控制在500ms之内，这样可以保证用户在2秒内可以看到你的网站展示出来。我们可以使用Redis等缓存部分内容，同时使用CDN加快文件的访问速度。

图片懒加载

这个概念其实非常简单，就是通过JS控制img标签的src属性和data-src属性的切换，在图片还剩xx像素进行用户屏幕时在对图片进行加载。这样可以大大加快网站首屏速度，减少首次的资源请求。

按需加载

很多插件在安装和引入时会进行全量引入，我们需要使用babel、SWC等工具，只对使用到的函数、组件进行打包，同时在开发中我推荐使用Tailwind CSS这样可以保证样式文件的体积较小。同时很多框架自带CSR加载以及懒加载组件例如在开发中非首屏展示的组件使用import()函数引入、next.js中使用next/dynamic进行CSR加载。

import dynamic from "next/dynamic";
const Reprint = dynamic(import("@/components/page/article/Reprint"), { ssr: false });