搜索引擎优化怎么做( 如何在代码上做SEO以及单页项目如何实现SEOvueseo)

　　搜索引擎优化怎么做(

如何在代码上做SEO以及单页项目如何实现SEOvueseo)

　　什么是SEO搜索引擎优化（Search engine optimizationvue seo，简称SEO），是指为了增加搜索引擎自然搜索结果（非商业推广结果）中收录的数量而做的优化行为) 和网页的排名位置。是为了从搜索引擎获得更多的免费流量和更好的展示图片。

　　SEM（Search engine marketing，搜索引擎营销）不仅包括SEO，还包括付费商业推广优化vue seo。

　　本文主要介绍前端如何在代码上做SEO，以及如何实现单页项目的SEOvue seo。

　　搜索引擎的工作原理 要了解SEO，首先要了解搜索引擎的工作原理。原理比较复杂，简化流程如下：

　　爬虫抓取网页内容

　　一般来说，爬虫首先从一个页面开始，从中提取到其他页面的链接，然后将它们作为下一个请求的对象，一直重复这个过程。因此，要想有一个好的SEO，你需要在主要的网站上有外链，这会增加你网站被搜索引擎抓取的机会。

　　分析网页内容

　　爬虫获取到 HTML 后，会分析其内容。一般需要去除杂项、分词、简历索引数据库。什么是索引数据库？简单来说就是记录一个词出现在哪些文档中，出现了多少次，出现在什么地方等等。为什么要建立简历索引数据库？它用于快速搜索。

　　搜索和排序

　　搜索会根据你输入的关键词查询对应的索引数据库，并对结果进行处理和排序。

　　SEO网站前端编码结构

　　网站 结构要清晰。一般网站的结构是树状的，一般分为三个层次：首页→频道页（列表页）→文章页（详情页）。

　　网站 的结构应该是扁平的。结构层数越少越好。一般不应超过三层。搜索引擎到了第三层一般都不想深入爬取。大多数网站，如掘金、雪球等，都是网站的两层结构，它们的首页和频道页是同一个页面。

　　导航

　　页面应该有简洁的导航。导航可以让搜索引擎知道网站的结构，也可以让搜索引擎知道当前页面在网站的结构中的级别。建议：

　　每个页面都收录导航。更多内容网站，可以使用面包屑导航。该链接使用文本链接。如果是图片，则使用 alt 属性通知搜索引擎链接指向的位置。规范网址

　　一个标准化的、简单的、易于理解的 URL 可以让搜索引擎更好地抓取内容。建议：

　　同一个页面只对应一个url。多个 URL 可以使用 301 进行重定向。url可以反映网页的内容和网站的结构信息。例如}

　　Sitemap可以通知搜索引擎在网站上有哪些页面可供抓取，让搜索引擎更智能地抓取网站。

　　机器人.txt

　　搜索引擎抓取网站 访问的第一个文件是robots.txt。在该文件中声明网站中不想被蜘蛛访问的部分，使网站的部分或全部内容不能被搜索引擎和收录，或者可以通过robots.txt指定使搜索引擎只搜索收录指定的内容。

　　合理的}

　　对于不同的返回码，搜索引擎的处理逻辑是不同的。

　　如果网站暂时关闭，建议在无法打开网页时使用503状态。503可以通知百度蜘蛛页面暂时不可用，请稍后再试。如果百度蜘蛛对您的网站抓取压力过大，请尽量不要使用404，也建议返回503，这样百度蜘蛛过一段时间会再次尝试抓取该链接。如果该站点当时是免费的，它将被成功抓取。一些网站希望百度只会收录部分内容，比如审核后的内容，一段时间积累的新用户页面等等。在这种情况下，建议对新发布的内容暂时返回403，待审核或做好处理后再返回正常返回码。当网站搬迁或域名变更时，请使用301返回。合适的标题

　　标题是网页的主要内容，告诉搜索引擎。

　　每个网页都应该有一个唯一的标题。不要为所有页面使用默认标题。标题应简洁明了，收录本网页最重要的内容，不得列出与网页内容无关的信息。用户通常从左侧浏览。在右边，重要的内容应该放在标题的顶部。百度建议说明：

　　首页：网站名称或网站名称_服务介绍/产品介绍频道页面：频道名称_网站名称文章页面：文章标题_频道名称_网站说明有合适的名字

　　描述是对网页内容的简要概括。该标签的存在与否不影响页面的权重，只会作为搜索结果摘要的选择目标。百度推荐做法：

　　为每个网页创建不同的描述，避免所有网页使用相同的描述。网站首页、频道页、产品参数页等没有摘要的网页最适合用description来准确描述网页，不要堆砌关键词，合理长度的HTML语义

　　HTML 语义使用标签和属性来描述内容。所以HTML语义是SEO的基石。一般建议：

　　HTML 结构应该清晰简洁。跳转使用标签，不要使用js跳转图片加alt指令文章使用标签携带... Vue单页项目的SEO 目前，SEO支持较好的项目方案是使用服务端渲染. 所以如果项目有SEO需求，那么更好的解决方案是服务端渲染。

　　如果你采用了前后分离的单页项目，并且你的网站内容不需要AJAX来获取和显示内容，那么你可以试试prerender-spa-plugin插件，这是一个webpack 插件。它可以帮助您在打包过程中通过无头浏览器呈现您的页面并生成相应的 HTML。当然，这个方案适合你的路由是静态的，而且路由数量不是海量的。

　　如果你的内容是通过AJAX动态获取的，那么你可以为vue单页项目尝试prerender。这是一种预渲染服务，可以帮助您通过无头浏览器渲染页面并返回 HTML。此解决方案与 prerender-spa-plugin 非常相似。两者都使用无头浏览器来呈现页面。不同之处在于渲染的时间。Prerender-spa-plugin 是在打包过程中渲染的，注定只渲染静态路由。预渲染是根据请求渲染的，因此可以渲染动态路由。现在我将专注于预渲染程序。

　　使用预渲染

　　1、安装

　　$ npm install prerender copy code 2、 start service server.js

　　const prerender = require(\'prerender\');const server = prerender();server.start(); 复制代码3、测试

　　}

　　预渲染方案的原理

　　首先，服务器收到一个页面请求，然后判断该请求是否来自搜索引擎的爬虫。如果不是，则直接返回单页项目的HTML，按照正常单页项目的工作模式（客户端渲染），如果是，则将请求转发给预渲染服务，预渲染服务将通过headless浏览器进行预渲染，渲染完成后会返回内容，以便爬虫获取带有内容的HTML。预渲染中间件用于判断请求是否来自搜索引擎爬虫并转发请求。

　　值得注意的是，预渲染服务不收录无头浏览器，需要自行安装chrome浏览器。因此，整个程序的运行需要三个部分：

　　Chrome 浏览器预渲染服务 prerender 中间件 那么预渲染服务是如何知道页面渲染完成的呢？Prerender 服务计算未完成请求的数量以确定页面何时完成加载。一旦未完成的请求数达到零，服务将等待一段时间（默认 500 毫秒），然后保存 HTML。

　　预渲染的最佳实践

　　经过实践，请求prerender渲染的页面需要时间。快的时候大概2s左右，慢的时候可以长达8s。一般来说，请求时间最好在3s以内。于是我从以下几个方面入手，探索了预渲染的优化方法。

　　减少资源请求时间

　　影响prerender渲染时间的资源主要包括js请求资源和api请求资源。api请求时间一般由后端决定，所以我考虑的是如何减少js资源请求时间。一般预渲染服务渲染的资源请求地址是由页面请求URL决定的，所以一般是在线地址。如果我们在网站的服务器上部署预渲染服务，让预渲染服务请求资源到本地，那么可以缩短资源的请求时间。

　　如果您的在线服务启用了 CDN，那么本地资源还有一个优势，那就是节省 CDN 流量。

　　优化预渲染选项

　　prerender 提供了一些自定义选项

　　pageDoneCheckInterval：该参数是预渲染检查页面请求是否完成的定时器时间。默认为500ms，即每500ms检查一次未完成的请求数是否为零。我将其修改为 100ms 以增加其检查的频率。

　　waitAfterLastRequest：该参数是最后一次请求完成后的等待时间。默认值为 500 毫秒。请求完成后，页面更新和渲染需要时间。如果立即返回，则可能无法及时呈现请求的数据。我将时间更改为 200 毫秒。

　　预渲染插件

　　}

　　添加}

　　var prerender = require(\'prerender\');var server = prerender()server.use(prerender.}

　　复制代码 如果你需要设置301重定向，你可以这样做

　　Prerender 根据未完成的请求数判断渲染是否结束。但是我们返回给搜索引擎的HTML只需要渲染js动态添加的DOM，其实不需要渲染css或者渲染接口返回的图片。让我们看看预渲染器在渲染过程中是否会请求这些资源。Prerender 可以开启是否打印请求，开启方法如下：

　　var server = prerender({ logRequests: true}); 复制代码后，就可以在控制台看到请求了。该请求收录 css 和图像资源。

　　2019-07-17T04:34:03.180Z-47}

　　网页的 HTML 文件。网页截图（视口或全屏）。网页的 PDF 文件。网页的 HAR 文件执行你自己的 javascript 并返回 json 和 HTML。显然，这些函数需要加载你需要的 CSS 或图片资源。否则网页显示有问题。这时候，如果你只需要满足SEO要求不需要的功能，那么blockResources插件就可以派上用场了。添加插件的方式如下：

　　var prerender = require(\'prerender\'); var server = prerender()server.use(prerender.blockResources());server.start(); 使用blockResources插件后，图片资源和字体资源会被中止（放弃）。

　　自定义渲染结束时间

　　如果你想更精细地控制 prerender 返回的时间，提前结束或延迟结束，那么你可以使用这个标志 window.prerenderReady。

　　首先，您需要将 window.prerenderReady 设置为 false。当 prerender 检测到 window.prerenderReady 为 false 后，它会等待你将其设置为 true 再返回结果。

　　渲染完成后复制代码，一般在界面请求完成，渲染完成后

　　window.prerenderReady = true; 复制代码，以便您可以更自由地控制渲染何时结束。

　　启用缓存

　　缓存有两个方面，一个是}

　　第一}

　　$ npm install redis , done);)).set(\'afterRender\', function(err, req, prerender_res) {client.set(req.url, prerender_res.body)}); 复制代码可以通过 beforeRender 和 afterRender Hooks 进行细粒度控制，对于频繁的内容变化不缓存或者短期缓存，对于不频繁的内容变化设置长期缓存。启用缓存不仅可以加快返回时间，还可以减轻服务器的压力。

　　统计和监测

　　可以在中间件的afterRender中进行统计和监控。

　　prerender.set(\'afterRender\', function(err, req, prerender_res) {if(err){ // 这里是错误监控代码 // ... // return} let {headers: req_headers, originalUrl} = req let {headers: res_headers, body} = prerender_res // 这里是统计代码，可以保存请求并返回相关信息}) 复制代码汇总

　　通过以上优化方法（除了自定义渲染结束时间和开启缓存），我已经稳定了HTML请求时间在5s左右。