前端SEO相关

走来走去的陈同学
135 阅读1分钟

SEO 友好型网站设计

  1. 质量高的网站，会被增加搜索引擎的收录率。高质量内容网站包括页面内容、SEO 相关（key、title、description）、url 设计、页面结构、运营推广。
  2. 而页面内容、（key、title、description）这部分内容属于其它部门的工作。针对前端，我们可以从页面结构和 url 设计上进行优化。
  3. 运营推广过程中，前端可以针对站点不同时期。可以提供 robots.txt，sitemap.xml 等文件

一、页面结构

1.1 页面中的路由跳转，使用内容链接的形式。

在现有项目中存在一部分跳转路由功能，使用了按钮+事件的方式实现跳转。这种形式是不利于浏览器爬虫去获取你的关联内链。

尽量使用<a />、<nuxt-link />标签实现内容链接。

错误示例：

<button @click="$router.push(`/help`)">去帮助页</button>

正确示例：

<a href="/help">去帮助页</a> <nuxt-link :to="/help">去帮助页</nuxt-link>

1.2 纯图片的内容展示区，要为图片添加说明

搜索引擎是无法识别图片内容的，所以需要在图片内容区，为<img/>标签录入 alt 属性进行说明。特别是当图片做导航时，需要使用 alt 属性告诉搜索引擎所指向的网页内容。

正确示例：

<nuxt-link to="/information/featured/4d8991ec062f47e18490ac23497bddf4">
  <img src="@/assets/images/home/discount1.png" alt="首购有礼" />
</nuxt-link>

1.3 服务端渲染页面必须所有内容都在服务端构建完成。

当页面业务场景属于浏览器爬取内容，页面的内容构建就必须在服务端构建完成。不然搜索引擎将永远拿不到未渲染的那部分模块，搜索引擎是不会去执行 js 代码。它只会去收录访问链接后 response 中的 html 结构。

错误示例：

<ul>
  // 分类选项
  <li v-for="item in classificationList" :key="item.id">
    <el-button
      type="text"
      :class="{ isClassification: indexCategoryproductsList.id === item.id }"
      @click="classificationChange(item.id)"
    >
      {{ item.name }}
    </el-button>
  </li>
</ul>
// 商品列表
<div class="classificationList">
  <ProductItem :products-list="indexCategoryproductsList.product"></ProductItem>
</div>
<script>
  classificationChange(id: string) {
    // 调用接口---商品信息
    $CategoryBrowsing(id)
      .then((res) => {
        this.indexCategoryproductsList = res.data.categoryArrayProduct as IndexCategoryList
      })
      .catch((err) => {
        this.$message.error(err.rt_msg || '获取类别切换失败')
      })
  }
</script>

上例子中商品列表是由商品分类控制展示，这一部分数据应该是在服务端初始化时就获取到，并进行返回构建在页面中。而不是通过分类按钮去根据特定分类 id 通过调用接口的形式去获取部分内容。

1.4 谨慎使用小标题元素

标题使用要为页面内容主体标题，应在合适的位置使用标题标记，因为如果网页上的标题标记过多，用户将难以浏览内容，也难以确定主题的起止位置。

标题使用不准确会导致搜索引擎收录展示内容有误

1.5 页面数据调整操作需关联 URL

种类、属性选择都会导致页面内容变动，这块按钮转化为<a/>标签之后，不仅会为站点添加更多内链，也能为爬虫提供多个入口，提高页面收录率。

二. URL 设计

2.1 简洁的 URL 设计

简介的 URL 设计会更偏向于搜索引擎收录，目录化的 url 层级结构尽量不要超过三层。层级越深搜索引擎偏向性越差。

2.2 URL 中的命名

👍建议：在网址中使用简单、说明性字词

https://www.xxx.com/help

👍建议: 根据需要使用 UTF-8 编码。例如，以下示例对网址中的阿拉伯语字符使用 UTF-8 编码：

https://www.xxxx.com/%D9%86%D8%B9%D9%86%D8%A7%D8%B9/%D8%A8%D9%82%D8%A7%D9%84%D8%A9

👎不建议：在网址中使用不易读的、冗长的 ID 编号：

prod.xxx.com/product/cla…

三. 相关文件

3.1 robots.txt

robots.txt 文件规定了搜索引擎抓取工具可以访问您网站上的哪些网址。 此文件主要用于避免您的网站收到过多请求；它并不是一种阻止 Google 抓取某个网页的机制。若想阻止 Google 访问某个网页，请[使用 noindex 禁止将其编入索引])。

robots.txt 文件主要用于管理流向您网站的抓取工具流量，通常用于阻止 Google 访问某个文件（具体取决于文件类型）。

....未完待续

3.2 站点地图 siteMap.xml

站点地图是一种文件，您可以在其中提供与您网站中的网页、视频或其他文件有关的信息，还可以说明这些内容之间的关系。搜索引擎会读取此文件，以便更高效地抓取您的网站。站点地图会告诉 搜索引擎您认为网站中的哪些网页和文件比较重要，还会提供与这些文件有关的重要信息。例如，网页上次更新的时间和网页是否有任何备用的语言版本。

也可以为视频提供站点地图。例如：

  • 站点地图视频条目可以指定视频的时长、评分以及适合哪些年龄段的受众。
  • 站点地图图片条目中可包含网页中所含图片的位置。
3.2.1 为视频创建站点地图

示例：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
   <url>
     <loc>https://www.yiheda.com/</loc>
     <video:video>
       <video:thumbnail_loc>https://www.yiheda.com/_nuxt/img/index-video.d4b95c5.jpg</video:thumbnail_loc>
       <video:title>视频标题</video:title>
       <video:description>xxxx</video:description>
       <video:content_loc>
            xxx.mp4</video:content_loc>
       <video:player_loc>xxx</video:player_loc>
       <video:duration>465</video:duration>
       <video:expiration_date>2021-11-05T19:20:30+08:00</video:expiration_date>
       <video:view_count>12345</video:view_count>
       <video:publication_date>2007-11-05T19:20:30+08:00</video:publication_date>
       <video:family_friendly>yes</video:family_friendly>
       <video:requires_subscription>no</video:requires_subscription>
       <video:live>no</video:live>
     </video:video>
   </url>
</urlset>

标签定义说明

您网站上的单个托管网页的父级标记。此标记采用基本站点地图格式。
指定在其中托管一个或多个视频的托管网页。用户点击 Google 搜索中的视频结果后，将转至该网页。此网址在站点地图中必须是唯一的。此标记采用基本站点地图格式。 如果单个网页上有多个视频**，请为该网页创建一个 <loc> 标记，并为该网页上的每个视频创建一个 <video> 子级元素。
[video:video]()在 <loc> 标记指定的网页上，单个视频的所有相关信息的父级元素。
video:thumbnail_loc指向视频缩略图文件的网址。
video:title视频标题。所有 HTML 实体都必须进行转义或封装在一个 CDATA 块中。我们建议此标题与网页上显示的视频标题一致。
video:description视频的说明。不得超过 2048 个字符。所有 HTML 实体都必须进行转义或封装在一个 CDATA 块中。必须与网页上显示的说明一致（不必逐字匹配）
video:content_loc必须提供 <video:content_loc> 或 <video:player_loc> 标记。我们建议您尽可能提供 <video:content_loc> 标记。这是 Google 提取视频内容文件的最有效方式。如果 <video:content_loc> 不可用，请提供 <video:player_loc> 作为替代方法。 1. 不支持 HTML 和 Flash 格式。 2. 不得与 <loc> 网址相同。 3. 此标记相当于结构化数据中的 VideoObject.contentUrl。 4. 最佳实践：如果您想对内容访问权限设定限制，但仍然希望 Googlebot 抓取该内容，请使用 DNS 反向查找确保 Googlebot 能够访问您的内容。
video:player_loc向特定视频的播放器的网址。通常，该信息由 <embed> 标记的 src 属性提供。
video:duration视频的时长（以秒为单位）。值必须介于 1（含）和 28800（8 小时，含）之间。
video:expiration_date视频的失效日期（采用 W3C 格式）。如果您的视频不会失效，则不要添加此标记。如果存在此标记，则在此日期之后，Google 搜索将不会显示您的视频。对于同一网址上的周期性视频，请将失效日期更新为新的失效日期。 支持的值为完整日期 (YYYY-MM-DD)，或完整日期加时、分和秒以及时区 (YYYY-MM-DDThh:mm:ss+TZD) 示例：2012-07-16T19:20:30+08:00
video:view_count视频的观看次数。
video:publication_date首次发布视频的日期（采用 W3C 格式）。支持的值为完整日期 (YYYY-MM-DD)，或完整日期加时、分和秒以及时区 (YYYY-MM-DDThh:mm:ss+TZD)。 示例：2007-07-16T19:20:30+08:00
video:family_friendly用户能否在安全搜索模式下搜到该视频。如果您省略了此标记，那么开启安全搜索后也能搜到该视频。
video:requires_subscription指明是否需要订阅才能观看视频。允许的值为 yes 或 no。
video:live指明视频是否为直播视频。支持的值为 yes 或 no。
3.2.2 nuxtjs 中站点地图的使用

nuxtjs 的站点地图的自动生成依托于@nuxtjs/sitemap工具。npm 下载 sitemap 工具包

(1) 在根目录下创建 config/sitemap.js 文件

//  config/sitemap.js
​
import axios from 'axios'
​
const HOSTNAME = 'http://xxx.com/'
​
const API = 'http://xxx.api.com' // 请求站点目录API
​
const sitemap = {
  path: '/sitemap.xml', // 生成的文件路径
  hostname: HOSTNAME, // 网站网址
  cachesTime: 1000 * 60 * 60 * 24 * 7, // 7天 更新频率，只有generate: false有用
  gzip: false, // 生成 .xml.gz 压缩的 sitemap
  generate: false, // 允许使用 nuxt generate 生成
  // 排除不要的页面
  exclude: ['/404', '/order/**', '/personal/**', '/testComponent/**'],
  // 默认的配置
  defaults: {
    changefreq: 'always',
    lastmod: new Date(),
  },
  // 需要生成的xml数据，return 返回需要给出的xml数据 -- 动态生成siteMap站点地图
  routes: async () => {
    /**
     * url: 路径，此路径是相对路径。
     *      相对于 hostname
     */
    const routes = [
      // 首页
      {
        url: '/',
        changefreq: 'always',
        lastmod: new Date(),
        priority: 1,
      },
      {
        url: '/member/login',
        changefreq: 'always',
        lastmod: new Date(),
      },
    ]
    try {
      const { data: routeData } = await axios.get(`${API}/cim/operation/selectIds`)
      const { helpClassifyIds, newsIds } = routeData.data
      // 帮助小类
      helpClassifyIds.forEach((url) => {
        const route = {
          url,
          changefreq: 'weekly',
          lastmod: new Date(),
        }
        routes.push(route)
      })
      // 帮助内容
      newsIds.forEach((url) => {
        const route = {
          url,
          changefreq: 'weekly',
          lastmod: new Date(),
        }
        routes.push(route)
      })
    } catch (err) {
      console.log('获取动态站点地图错误....', err)
    }
    return routes
  },
}
​
export default sitemap

(2) 在 nuxt.config.js 中引入

// nuxt.config.js
import sitemap from './config/sitemap'
module.exports = {
  sitemap,
}

(3) 访问

启动服务后访问 http://ip:port/sitemap.xml

avatar
文章
阅读
粉丝