前段时间渲染SSR与静态网站渲染SSG服务端的工作原理分析

前言

项目的SEO优化是前段时间做的，现在写一个总结。我们知道 SPA 应用程序常规使用 Vue/ 开发，但自然单页应用程序 SEO 并不好。虽然有各种技术可以改进，例如使用预渲染，但也存在各种缺点。但即便如此，也无法抗拒像Vue/这样的框架的趋势。很多产品可以通过其他亮点进行推广，而不需要依赖SEO。也有需要登录才能使用seo的，没有意义。

如果项目真的对SEO和首屏加载速度有刚性要求，并且使用了Vue/这类技术，并且想尽量减少代码开发的额外难度，还有更直接的方式，就是直接使用-侧渲染框架，用于 Vue 的 Nuxt.js，Next.js/。

不过，其实学习一个新的框架也是一个额外的成本，哈哈，不过SSR渲染并不是用于实际开发的，至少你需要知道。我目前专注于技术栈，所以只知道.ssr渲染框架。有兴趣的可以看看我的两篇文章：

所以本文不讨论单页应用的SEO优化，而是基于服务器端渲染（SSR）/静态生成（SSG）的网站SEO优化。

本文将回顾传统的 SEO 优化方法，以及基于 SEO 的优化。

服务端渲染SSR和静态网站渲染SSG

服务端是指客户端向服务端发送请求，然后在运行时动态生成html内容返回给客户端。静态站点的解析是在构建时进行的，当有请求时，html被静态存储并直接发送回客户端。

通常，静态站点在运行时速度更快，因为它们不需要服务器端处理，但缺点是对数据的任何更改都需要完整的服务器端重建；服务器端渲染动态处理数据，不需要完全重建。

对于Vue/来说，他们的SSR/SSG框架的原因主要是SEO和首屏加载速度。

搜索引擎的工作原理

搜索引擎网站的后台会有一个庞大的数据库，里面存储着大量的关键词，每个关键词对应着很多网址。这些 URL 称为“搜索引擎蜘蛛”或“网络爬虫”程序，从 收集。

这些“蜘蛛”在互联网上爬行，从一个链接到另一个链接，分析内容，提取关键字并将它们添加到数据库中；如果蜘蛛认为是垃圾邮件或重复信息，它会放弃并继续爬取。当用户搜索时，可以检索到与关键字相关的URL并显示给用户。

当用户在搜索引擎上搜索时，比如搜索“前端”，会弹出所有包含“前端”这个词的网页，然后是每个包含“前端”这个词的网页将根据特定算法进行评分。返回搜索结果。其中包括“前端”内容，可以是文章标题、描述、关键字、内容，甚至是链接。当然，广告也有可能被优先考虑，你知道的。

一个关键字对使用多个网址，因此存在排序问题，与关键字最匹配的对应网址将排在第一位。在“蜘蛛”爬取网页内容和提取关键词的过程中，存在一个问题：“蜘蛛”能否理解。如果网站的内容是和js等，那么即使关键字更合适，也难以理解，会混淆。相应地，如果网站的内容能够被搜索引擎识别，搜索引擎就会增加网站的权重，增加网站的友好度。这样的过程我们称之为SEO()，即搜索引擎优化。

搜索引擎优化目的

使网站更有利于各大搜索引擎的爬取和索引，增加搜索引擎的友好度，使用户在搜索相应关键词时能够排在网站前面，增加产品曝光率和流量。

SEO优化方法

这里主要讲前端可以参与和做的优化方法。比如引入了很多SEO优化方法：控制首页链接数、扁平化目录层次、优化网站结构布局、分页导航写法等，但实际上日常前端开发并不能发挥作用网站的整体设计，只有协调，而且大部分都是一开始就预定好的东西。

例如，新闻媒体和其他网站更关注 SEO。通常，公司还会有一个SEO部门或SEO优化工程师职位。如上所述，网页的关键字和描述都交给他们参与和提供。我们不会讨论一些我们难以触及的优化方法。有兴趣的可以了解一下。

Web TDK 标记

每个页面的TDK都不一样，需要根据产品业务来提取核心关键词。

那么页面的TDK不同，我们需要动态设置，如果有-，就是用来设置标签的。

import React from 'react'import { Helmet } from 'react-helmet'const GoodsDetail = ({ title, description, keywords }) => {  return (    <div className='application'>      <Helmet>        <title>{title}title>        <meta name='description' content={`${description}`} />        <meta name='keywords' content={`${keywords}`} />      Helmet>      <div>content...div>    div>  )}复制代码

以上为演示，实际项目实践还是会单独提取组件中的内容。

在 Next.js 中，它带有 Head 组件：Head from ‘next/head’

语义标签

根据内容的结构，选择合适的标签，让代码尽可能的语义化，比如使用 , , , , nav 等语义标签可以让爬虫更好地解析。

合理使用h1~h6标签

h1标签在一个页面中最多只能出现一次，h2标签通常用作文章的副标题或副标题。如果要使用其他的h3-h6标签，要按顺序逐层嵌套，不能打断或颠倒。

比如首页的logo通常会加一个h1标签，但是当网站设计只显示logo图片而不显示文字时，可以通过将font-size设置为零来隐藏h1文字

<h1>  <img src="logo.png" alt="jacky" />  <span>jacky的个人博客span>h1>复制代码

图片的alt属性

一般情况下，alt 属性可以为空，除非图像纯粹是一个没有任何实际信息的显示类。否则，使用img标签添加alt属性，让“蜘蛛”抓取图片的信息。当网络无法加载或图片地址无效时，会显示alt属性的内容，而不是图片。

<img src="dog.jpg" width="300" height="200" alt="哈士奇" />复制代码

标签的

同样，a标签的属性其实就是提示文字的作用。当鼠标移到超链接上时，会出现提示文本。添加此属性对 SEO 也有一点好处。

<a  href="https://github.com/Jacky-Summer/personal-blog"  title="了解更多关于Jacky的个人博客"  >了解更多复制代码

404 页面

404页面首先是良好的用户体验，不会莫名其妙地报一些其他的提示。其次，对蜘蛛也很友好，不会因为页面错误而停止爬取，可以返回爬取网站的其他页面。

元元标记中使用忽略跟踪，告诉爬虫该页面上的所有链接都不需要跟踪。

复制代码

用于a标签，告诉爬虫该页面不需要跟踪。

登录/注册复制代码

通常用在a标签中，主要有三个作用：

“蜘蛛”为每个页面分配一定的权重。为了集中网页权重，将权重分配给其他必要的链接，设置rel=”告诉“爬虫”不要爬，避免爬虫爬取一些无意义的页面，影响爬取效率；而一旦“蜘蛛”爬取了外部链接，就再也回不来了。付费链接：为防止付费链接影响搜索结果排名，建议使用该属性。为了防止不可信的内容，博客上最常见的垃圾信息和评论是垃圾链接，目的是获取外部链接，以防止页面指向一些垃圾页面和站点。创建 .txt 文件

.txt 文件由一个或多个规则组成。每条规则都可以阻止（或允许）特定爬虫爬取对应网站中的指定文件路径。

User-agent: *Disallow:/admin/SiteMap: http://www.xxxx.com/sitemap.xml复制代码

关键词：

User- 表示网络爬虫的名称 表示不应爬取的目录或页面 应爬取的目录或页面 站点站点地图的位置

参考例子，比如百度的.txt，京东的.txt

文件在访问网站时首先被搜索引擎访问，然后根据文件中设置的规则抓取网站内容。通过设置和访问目录和文件，引导爬虫从网站爬取信息。

它主要用于防止您的网站收到过多的请求，告诉搜索引擎哪些页面应该和不应该被抓取。如果您不希望抓取您网站中可能对用户无用的某些页面，请传递设置。实现有针对性的 SEO 优化，向爬虫公开有用的链接，保护敏感和无用的文件。

即使网站上的所有内容都要被搜索引擎抓取，也要设置一个空文件。因为蜘蛛爬取网站内容时，首先爬取文件文件，如果文件不存在，那么当蜘蛛访问时，服务器会出现404错误日志，当多个搜索引擎爬取页面信息时，会有多次出现404错误，所以一般要在网站根目录下创建一个.txt文件。

空的 .txt 文件

User-agent: *Disallow:复制代码

如果您想了解更多关于 .txt 文件的信息，可以阅读：

一般如果涉及的目录比较多，会找网站工具动态生成.txt，比如生成.txt

创建站点地图

网站刚上线时，网站的外部链接不多，爬虫可能找不到这些页面；或者网站的页面之间没有很好的连接，爬虫很容易漏掉一些页面。这就是它派上用场的地方。

是对网站栏目和链接进行分类的文件，可以让搜索引擎全面收录网站网页地址，了解网站网页地址权重分布和网站内容更新，提高爬虫的爬取效率。该文件最多可包含 50,000 个 URL，且文件大小不得大于 10MB。

地图文件包括 html（用于用户）和 xml（用于搜索引擎）。最常见的是xml文件。 XML 格式有 6 个标签。关键标签包括链接地址（loc）、更新时间（）、更新频率（）和索引优先级（）。

爬虫如何知道网站是否提供了文件，即上面提到的路径放在.txt中。

首先在网站根目录下查找.txt，例如腾讯下的.txt如下：

User-agent: *Disallow:Sitemap: http://www.qq.com/sitemap_index.xml复制代码

找到了路径（只列出了一部分）

      http://news.qq.com/news_sitemap.xml.gz    2011-11-15        http://finance.qq.com/news_sitemap.xml.gz    2011-11-15        http://sports.qq.com/news_sitemap.xml.gz    2011-11-15    复制代码

一般网站开发后，这个一般是自动生成的，比如生成工具

结构化数据

结构化数据（数据）是一种标准化格式，用于通过提供有关页面含义的清晰线索来帮助理解页面。一般为 JSON-LD 格式。这种格式是什么样的？见谷歌官方示例代码：

<html>  <head>    <title>Party Coffee Caketitle>    <script type="application/ld+json">      {        "@context": "https://schema.org/",        "@type": "Recipe",        "name": "Party Coffee Cake",        "author": {          "@type": "Person",          "name": "Mary Stone"        },        "nutrition": {          "@type": "NutritionInformation",          "calories": "512 calories"        },        "datePublished": "2018-03-10",        "description": "This coffee cake is awesome and perfect for parties.",        "prepTime": "PT20M"      }    script>  head>  <body>    <h2>Party coffee cake recipeh2>    <p>      This coffee cake is awesome and perfect for parties.    p>  body>html>复制代码

列出页面属于“食谱”的页面类型、作者和发布时间、描述和烹饪时间等。这样， 搜索就有可能包含这些提示，或者您的关键信息搜索是更有利于寻找结果。

官方提供了各种字段来描述“配方”，你只需要勾选相关字段，直接按照格式使用即可。

由于这种SEO优化是针对谷歌搜索引擎的，采用这种方法的网站通常不限于国内用户，不仅针对结构化数据，还针对AMP页面。您可以了解它 – AMP

还提供了一个测试工具，即数据工具，它允许您输入测试站点的 URL，以查看该站点是否具有结构化数据设置。

性能优化

例如减少http请求、控制页面大小、延迟加载、使用缓存等，有很多方法可以提高网站的加载速度和良好的用户体验。这不是SEO问题，而是中间要做的开发事情。

因为网站慢的时候，“蜘蛛”一旦超时也会离开。

SEO优化下

是静态生成的，可以做SEO，但还是需要做SEO优化。

了解了以上SEO优化方法后，在实践中如何优化呢？这个，因为社区比较强大，插件也比较多，所以上面几个可以依靠插件快速配置生成。

—txt

在 -.js 中配置

module.exports = {  siteMetadata: {    siteUrl: 'https://www.xxxxx.com'  },  plugins: ['gatsby-plugin-robots-txt']};复制代码

—

在 -.js 中配置

{  resolve: `gatsby-plugin-sitemap`,  options: {    sitemapSize: 5000,  },},复制代码

网络 TDK

标准脚手架和官方文档都有一个SEO.js文件，它提供了我们设置TDK的方法

import React from 'react'import PropTypes from 'prop-types'import { Helmet } from 'react-helmet'import { useStaticQuery, graphql } from 'gatsby'function SEO({ description, lang, meta, title }) {  const { site } = useStaticQuery(    graphql`      query {        site {          siteMetadata {            title            description            author          }        }      }    `  )  const metaDescription = description || site.siteMetadata.description  return (    <Helmet      htmlAttributes={{        lang,      }}      title={title}      meta={[        {          name: `description`,          content: metaDescription,        },        {          property: `og:title`,          content: title,        },        {          property: `og:description`,          content: metaDescription,        },        {          property: `og:type`,          content: `website`,        },        {          name: `twitter:card`,          content: `summary`,        },        {          name: `twitter:creator`,          content: site.siteMetadata.author,        },        {          name: `twitter:title`,          content: title,        },        {          name: `twitter:description`,          content: metaDescription,        },      ].concat(meta)}    />  )}SEO.defaultProps = {  lang: `en`,  meta: [],  description: ``,}SEO.propTypes = {  description: PropTypes.string,  lang: PropTypes.string,  meta: PropTypes.arrayOf(PropTypes.object),  title: PropTypes.string.isRequired,}export default SEO复制代码

然后在页面模板文件中引入SEO.js，并传入页面的可变参数设置TDK等头部信息。

数据

例如，如果项目以新闻文章的形式显示，可以设置三种结构化数据（数据类型和字段不是凭空捏造的，这个需要检查对应的匹配） – 文章详细信息页面、文章列表页面以及公司介绍。

在项目根目录下新建项目

import React from 'react'import { Helmet } from 'react-helmet'function JsonLd({ children }) {  return (                )}export default JsonLd复制代码

const articleSchema = ({  url,  headline,  image,  datePublished,  dateModified,  author,  publisher,}) => ({  '@context': 'http://schema.org',  '@type': 'Article',  mainEntityOfPage: {    '@type': 'WebPage',    '@id': url,  },  headline,  image,  datePublished,  dateModified,  author: {    '@type': 'Person',    name: author,  },  publisher: {    '@type': 'Organization',    name: publisher.name,    logo: {      '@type': 'ImageObject',      url: publisher.logo,    },  },})export default articleSchema复制代码

const itemListSchema = ({ itemListElement }) => ({  '@context': 'http://schema.org',  '@type': 'ItemList',  itemListElement: itemListElement.map((item, index) => ({    '@type': 'ListItem',    position: index + 1,    ...item,  })),})export default itemListSchema复制代码

const organizationSchema = ({ name, url }) => ({  '@context': 'http://schema.org',  '@type': 'Organization',  name,  url,})export default organizationSchema复制代码

然后分别介绍页面。比如我们在文章详情页介绍相应类型的文件，大概就是这样的用法：

// ...import JsonLd from '@components/JsonLd'import SEO from '@components/SEO'import articleSchema from '@utils/json-ld/article'const DetailPage = ({ data }) => {  // 处理 data，拆开相关字段  return (    <Layout>      <SEO        title={meta_title || title}        description={meta_description}        keywords={meta_keywords}      />      <JsonLd>        {articleSchema({          url,          headline: title,          datePublished: first_publication_date,          dateModified: last_publication_date,          author: siteMetadata.title,          publisher: {            name: siteMetadata.title,            logo: 'xxx',          },        })}      JsonLd>      <Container>        <div>content...div>      Container>    Layout>  )}复制代码

上面的代码有混淆是正常的，因为我没有理解结构化数据的内容，但是看文档大概能理解。

性能优化工具

你可以去谷歌商店安装，打开F12，进入你的网站，点击，会生成网站对应的报告

下面有一些关于性能和 SEO 等的提示，您可以按照这些提示来改进您的代码。

文章的介绍到此结束。我希望它可以帮助您稍微了解 SEO。对 SEO 的探索并不是上述例子的结束。其实优化的方法有很多种。上面列出的比较常见。其实我觉得SEO优化无非就是想吸引更多的用户点击使用网站，但是如果网站内容质量高，用户体验好，性能好，那么有些用户使用后会自带。推广无疑比简单的SEO优化要强很多。

参考文献