前段时间渲染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百度发包工具_seo底层发包_seo发包怎么发给搜索引擎

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

由于这种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。对 SEO 的探索并不是上述例子的结束。其实优化的方法有很多种。上面列出的比较常见。其实我觉得SEO优化无非就是想吸引更多的用户点击使用网站,但是如果网站内容质量高,用户体验好,性能好,那么有些用户使用后会自带。推广无疑比简单的SEO优化要强很多。

参考文献

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论