点击seo工具 解决方案:基于 SSR/SSG 的前端 SEO 优化

　　点击seo工具 解决方案:基于 SSR/SSG 的前端 SEO 优化

　　前言

　　前段时间做项目SEO优化，现在才写总结。我们知道SPA应用常规是用Vue/React开发的，但是天然的单页应用SEO不好。虽然有各种技术可以改进，比如使用预渲染，但也存在各种不足。但即便如此，也抵挡不住Vue/React等框架的潮流。很多产品在不依赖SEO的情况下，也可以通过其他亮点进行推广，也有一些产品需要登录才能使用，用SEO也没有意义。

　　如果项目确实对SEO和首屏加载速度有硬性要求，并且使用了Vue/React等技术，想把代码开发的额外难度降到最低，还有更直接的方式，就是直接使用服务器端渲染框架，Nuxt.js 用于 Vue，Next.js/Gatsby 用于 React。

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

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

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

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

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

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

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

　　搜索引擎如何工作

　　在搜索引擎网站的后台会有一个非常大的数据库，里面存储着大量的关键词，而每个关键词对应着很多的url，这些url叫做Collected from通过“搜索引擎蜘蛛”或“网络爬虫”程序访问互联网。

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

　　当用户在搜索引擎上搜索时，比如搜索“前端”，就会弹出所有收录“前端”的网页，然后对每个收录“前端”的网页进行打分，排名按照特定的算法返回搜索结果。这些包括“前端”，它可以是文章标题、描述、关键字、内容，甚至链接。当然，也有可能广告是重中之重，你懂的。

　　关键词 对使用多个 URL，因此存在排序问题。相应的，与关键词最一致的URL会排在第一位。在“蜘蛛”抓取网页内容并提炼关键词的过程中，有一个问题：“蜘蛛”能否看懂。如果网站的内容是flash和js等，会让人看不懂，容易混淆，即使关键字再合适也是没有用的。相应地，如果网站的内容能够被搜索引擎识别，那么搜索引擎就会增加网站的权重，增加网站的友好度。这样的过程我们称之为SEO（Search Engine Optimization），即搜索引擎优化。

　　搜索引擎优化目的

　　让网站更有利于各大搜索引擎抓取和收录，增加对搜索引擎的友好度，让用户在搜索对应的网站时可以排在前面关键词 , 增加产品曝光率和流量。

　　SEO优化方法

　　这里主要说一下前端可以参与和做的优化方式。比如介绍了很多SEO优化方法：控制首页链接数、扁平化目录层次、优化网站结构布局、写分页导航等等，但其实日常前端开发无法整体对于网站来说设计的作用只能是协调，而这些大部分都是一开始就固定好的东西。

　　比如新闻媒体等。网站多关注SEO。通常公司也会有SEO部门或者SEO优化工程师的职位。上面说了，有网页关键词，说明就交给他们了。参与和提供，一些我们比较难接触到的优化方法就不细说了，有兴趣的可以多了解。

　　网络 TDK 标签

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

　　那么页面的TDK是不一样的，我们需要动态设置。对于react，有一个react-helmet插件可以设置head标签。

　　import React from 'react'

import { Helmet } from 'react-helmet'

const GoodsDetail = ({ title, description, keywords }) => {

return (

{title}

content...

)

}

复制代码

　　以上是一个演示，实际项目实践中还是会把Helmet中的内容分离出来做成组件。

　　在 Next.js 中，它自带 Head 组件：import Head from 'next/head'

　　语义标签

　　根据内容的结构，选择合适的HTML5标签，使代码尽可能语义化。例如，使用 header、footer、section、aside、article、nav 等语义标签可以让爬虫更好地解析。

　　h1~h6标签的合理使用

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

　　例如，h1标签通常被添加到首页的logo中，但是网站设计只显示logo图片而没有文字，h1文字可以通过将font-size设置为零来隐藏

　　

jacky的个人博客

复制代码

　　图片的alt属性

　　一般来说，alt属性可以为空，除非图片只是一个没有任何实际信息的纯展示类。否则，必须在img标签中加上alt属性，这样“蜘蛛”才能抓取图片信息。当无法加载网络或图片地址无效时，将显示alt属性的内容，而不是图片。

　　

复制代码

　　a标签的标题

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

　　了解更多</a

>

复制代码

　　404页面

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

　　nofollow nofollow用在meta元标签中，告诉爬虫页面上的所有链接都不需要被跟踪。

　　

复制代码

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

　　<a span class="hljs-attr"href/span=span class="hljs-string""https://www.xxxx?login"/span rel=span class="hljs-string""nofollow"/span>登录/注册</a>

复制代码

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

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

　　robots.txt 文件收录一个或多个规则。每个规则阻止（或允许）特定的爬虫在相应的 网站 中爬取指定的文件路径。

　　User-agent: *

Disallow:/admin/

SiteMap: http://www.xxxx.com/sitemap.xml

复制代码

　　关键词：

　　User-agent 表示网络爬虫的名字 Disallow 表示不应该被抓取的目录或网页 Allow 应该被抓取的目录或网页 Sitemap 网站站点地图的位置

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

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

　　它主要是用来防止你的网站收到过多的请求，以及告诉搜索引擎哪些页面应该抓取哪些页面不应该抓取。如果不希望网站的某些页面被抓取，这些页面可能对用户无用，通过Disallow设置。实现针对性SEO优化，将有用链接暴露给爬虫，保护敏感无用文件。

　　即使网站上面的所有内容都希望被搜索引擎抓取，设置一个空的机器人文件。因为当蜘蛛爬取网站的内容时，第一个抓取的文件就是robot文件。如果该文件不存在，那么蜘蛛访问时，服务器上会有404错误日志，多个搜索引擎抓取页面信息时，会产生多个404错误，所以一般必须有一个robots.txt文件在 网站 的根目录中创建。

　　清空 robots.txt 文件

　　User-agent: *

Disallow:

复制代码

　　如果您想更详细地了解 robots.txt 文件，可以查看：

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

　　创建一个 网站 地图站点地图

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

　　站点地图是对网站栏目和链接进行分类的文件，让搜索引擎全面了解收录站点网页地址，了解站点网页地址权重分布和站点内容更新，提高抓取效率的爬虫。站点地图文件必须收录不超过 50,000 个 URL，并且不超过 10MB。

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

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

　　首先找到网站根目录下的robots.txt，例如腾讯网下的robots.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

复制代码

　　一般网站开发后，一般会自动生成sitemap，比如sitemap生成工具

　　结构化数据

　　结构化数据是一种标准化格式，通过向 Google 提供关于网页内容的清晰线索，帮助理解网页。一般为JSON-LD格式。这种格式是什么样的？参见谷歌官方示例代码：

　　

Party Coffee Cake

{

<p>

"@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"

}

Party coffee cake recipe

This coffee cake is awesome and perfect for parties.

复制代码</p>

　　列出属于“食谱”的网页类型、作者和发布时间、描述和烹饪时间等。这样，谷歌搜索就有机会收录这些提示，或者你用关键信息搜索找到结果。

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

　　由于这种SEO优化是谷歌搜索引擎独有的，采用这种方法的网站通常不限于国内用户。它不仅是结构化数据所特有的，也是一种SEO优化方法就是AMP页面，有兴趣的可以了解一下——AMP

　　Google 还提供了一个测试工具，结构化数据测试工具，你可以在其中输入一个测试网站 URL 来查看网站 是否有结构化数据设置。

　　性能优化

　　比如减少http请求，控制页面大小，延迟加载，使用缓存等等，方法很多，都是为了提高网站的加载速度，良好的用户体验。这不是专门针对 SEO 的，而是开发中要做的事情。

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

　　盖茨比的 SEO 优化

　　Gatsby本身采用静态生成的方式，SEO已经可以了，但是SEO优化还是需要的。

　　了解了以上SEO优化方法后，Gatsby究竟应该如何优化呢？这个，因为Gatsby社区比较强大，插件比较多，所以上面几个可以依赖插件快速配置生成。

　　gatsby-plugin-robots-txt

　　在 gatsby-config.js 中配置

　　module.exports = {

siteMetadata: {

siteUrl: 'https://www.xxxxx.com'

},

plugins: ['gatsby-plugin-robots-txt']

};

复制代码

　　盖茨比插件网站地图

　　在 gatsby-config.js 中配置

　　{

resolve: `gatsby-plugin-sitemap`,

options: {

sitemapSize: 5000,

},

},

复制代码

　　网络TDK

　　Gatsby标准脚手架和官方文档都有一个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 (

)

}

SEO.defaultProps = {

lang: `en`,

meta: [],

description: ``,

<p>

}

SEO.propTypes = {

description: PropTypes.string,

lang: PropTypes.string,

meta: PropTypes.arrayOf(PropTypes.object),

title: PropTypes.string.isRequired,

}

export default SEO

复制代码</p>

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

　　结构化数据

　　比如项目在新闻文章中展示，可以设置三种结构化数据（数据类型和字段不是凭空捏造的，需要自己去google找对应的匹配） - 文章详情页，文章列表页，加上公司介绍。

　　在项目根目录下新建一个

　　import React from 'react'

import { Helmet } from 'react-helmet'

function JsonLd({ children }) {

return (

{JSON.stringify(children)}

)

}

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 (

{articleSchema({

url,

headline: title,

datePublished: first_publication_date,

dateModified: last_publication_date,

author: siteMetadata.title,

publisher: {

name: siteMetadata.title,

logo: 'xxx',

},

})}

content...

)

}

复制代码

　　上面的代码看不懂是正常的，因为我还没有看懂结构化数据的内容，不过看了文档大概能看清楚。

　　Lighthouse 性能优化工具

　　可以去Google商店安装LightHouse，打开F12，输入你的网站，点击Generate report，就会生成网站对应的报告

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

　　文章的介绍到此结束，希望对大家了解SEO有所帮助。搜索引擎优化的探索几乎没有在上面的例子之后消失。其实优化的方式是多种多样的。上面列举的都是比较常见的。其实我觉得SEO优化无非是为了吸引更多的用户点击使用网站，但是如果网站的内容质量高，用户体验好，性能好好，那么，在一些用户使用之后，它就会有自己的推广，这无疑比单纯的SEO优化要好很多。

　　参考文章

　　解决方案:智能车牌识别系统自动识别原理解剖

　　图像采集：实时、不间断记录，采集主机通过卡口或车辆违章通过高清*敏*感*词*抓拍主机。

　　预处理：图像质量是影响车辆识别率的关键因素。因此，需要进行噪声过滤、自动白平衡、自动曝光、伽玛校正、边缘增强、对比度调整等。

　　车牌定位：车牌定位的准确性直接决定了后续的字符分割和识别效果，是影响整个车牌识别率的重要因素。其核心是纹理特征分析和定位算法。对图像预处理后的灰度图像进行行列扫描，通过行扫描确定列方向收录车牌线段的候选区域，并确定该区域的起始行坐标和高度。然后对该区域进行列扫描，确定其列坐标和宽度，从而确定车牌区域。图像中的所有车牌都可以通过这样的算法定位。

　　

　　字符分割：在定位图像中的车牌区域后，通过灰度化、灰度拉伸、二值化和边缘处理进一步精确定位字符区域，然后根据字符大小特征提出动态模板法进行字符分割。并归一化字符大小。

　　字符识别：对分割后的字符进行缩放和特征提取，得到特定字符的表达形式，然后通过分类判别函数和分类规则，对字符库模板中的标准字符表达形式进行匹配判别，并输入的字符可以是识别字符图像。

　　结果输出：以文本格式输出车牌识别结果。

　　无人驾驶智能系统的开发和应用市场才刚刚起步，竞争相对较小。国内开发此类系统的企业屈指可数，很多还处于模仿开发阶段。工程行业的技术壁垒尚未显*敏*感*词*和人力，让易泊时代的无人超市、自动车牌识别、*敏*感*词*系统遥遥领先。

　　

　　OCR车牌识别是我公司自主研发的车牌识别SDK。已成功应用于智能交通系统、出入口管理系统、*敏*感*词*图像框系统、移动警务系统等各行业。车牌识别SDK采用清华OCR技术，集成了车牌定位、车牌字符分割、车牌字符识别等算法，使系统具有识别效率高、速度快、适应性强、使用方便等优点. 该技术处于国际先进水平。受到了相关行业用户的广泛好评。

　　车牌识别SDK可应用于Windows、Linux、ARM、DSP、ADI、WIN CE、Android等多种平台，是目前国内市场上支持平台类型最多的车牌识别SDK。

　　车牌识别SDK支持图片和视频流两种识别模式，适用于多种场景，适应性强。