基于Nuxt.js实现SEO设置以及部署

__cherry__
1,056 阅读3分钟

什么是SEO？🤔️

搜索引擎优化（Search Engine Optimization）, 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 搜素引擎最大化收录，最大化提高权重，带来更多流量。

搜索引擎的工作原理 👀

image.png

被称为“蜘蛛”也被称为“机器人”的程序在网页中爬行，从一个链接爬到另外一个链接。将抓取回来的数据对其关键词依次分析。存入原始页面数据库，建立索引链接。搜索引擎蜘蛛在抓取页面时，也做一定的重复内容检测，一旦遇到权重很低的网站上有大量抄袭、采集或者复制的内容，很可能就不再爬行。

实现SEO的方法

通过服务端渲染（SSR），即：网页是通过服务端渲染生成后输出给客户端。

为什么要采取SSR

为了用户的体验以及SEO

有时用户打开网页的速度比较慢，采用SSR可加快页面的渲染 简单来说我们希望搜索引擎看到这样的代码😄

image.png

而不是这样的代码🤦‍♀️

image.png

具体实现步骤:

1.网页代码优化👇

title:最好使用描述 + 标题的方式。 只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。

如：描述| 标题

keywords : 列举出几个页面的重要关键字即可，切记过分堆砌

description :对当前网页内容的简单描述

2.语义化书写HTML代码，符合W3C标准 👇

尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事

3.a标签🏷️

标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

<a href="https:www.baidu.com" title='百度' class='logo'></a>

4.h1标签🏷️

h1标签自带权重，'爬虫'认为它最重要，每个页面最多只能有一个H1标签,放在该页面最重要的标题上面

5.alt

img标签使用alt加以说明

<img src='img.png' alt="描述"/>

多语言

动态路由

在pages目录下创建_lang文件

对不同的语言版本使用不同的 URL，而不是使用 cookie 或浏览器设置来调整页面上的内容语言。👇

https:example.com/zh
https:example.com/en

⚠️爬虫发送 HTTP 请求时不需要Accept-Language在请求头中设置。所以该值为空

请使用hreflang告诉Google不同语言版本,使搜索结果链接到页面的正确语言版本。

<link rel="alternate" data-n-head="true" href="https://example.com/en/" hreflang="en">

robots.txt👇

robots.txt 文件告诉搜索引擎爬虫，爬虫可以访问您网站上的哪些 URL。

robots.txt 文件位于您网站的根目录中。因此，对于 site www.example.com， robots.txt 文件位于 www.example.com/robots.txt

规则👇：

  • user-agent：标识相应规则适用于哪些抓取工具。
  • allow：可抓取的网址路径。
  • disallow：不可抓取的网址路径。
  • sitemap：站点地图的完整网址。
User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: http://www.example.com/sitemap.xml

站点地图 👉 sitemap

站点地图是 一个文件，您可以在其中提供有关您站点上的页面、视频和其他文件以及它们之间的关系的信息。站点地图会告诉 Google 哪些页面和文件在您的站点中很重要，并且还提供有关这些文件的有价值的信息。Google 等搜索引擎会读取此文件以更有效地抓取您的网站。

站点地图的格式👇：

以下配置采用XML格式👇：

属性是否必填描述
urlsettrue封装文件并引用当前协议标准。
urltrue条目的父标记
loctrue页面的 URL
lastmodfalse跟新日期：YYYY-MM-DD
changefreqfalse更改的频率
priorityfalse优先级:0.0 到 1.0

通知搜索引擎爬虫

1⃣️在 robots.txt 文件中指定站点地图位置

创建sitemap.xml文件并且把路径写入到robots.txt中， Sitemap: https://example.com/sitemap.xml

image.png

  1. XML 站点地图基础版本，其中包含单个 URL 的位置：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/foo.html</loc>
    <lastmod>2018-06-04</lastmod>
  </url>
</urlset>

2.使用站点地图索引文件（对多个站点地图文件进行分组）

属性是否必填描述
sitemapindextrue站点地图的信息
sitemaptrue单个站点地图的信息
loctrue站点地图的位置
lastmodfalse跟新日期：YYYY-MM-DD

sitemap.xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
      <loc>https://example.com/sitemap_zh.xml</loc>
    </sitemap>
    <sitemap>
      <loc>https://example.com/sitemap_en.xml</loc>
    </sitemap>
</sitemapindex>

sitemap_zh.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
      <loc>https://example.com/zh/</loc>
    </sitemap>
    <sitemap>
      <loc>https://example.com/zh/help</loc>
    </sitemap>
</sitemapindex>

避免几个页面的内容高度相似，降低搜索引擎爬取的权重，可使用canonical来优化

<link data-n-head="true" rel="canonical" href="https:example.com"></link>

部署到Vercel

在项目根目录下创建vercel.json文件

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": [
          "package.json",
          "config/*.js"
        ]
      }
    }
  ]
}
  • serverFiles

一些不是由webpack（或在 static/ 中）构建的依赖文件。可以将它添加到serverFiles中（例如本地模块）

  • vercel打包好的格式为

image.png

avatar
文章
阅读
粉丝