Nextjs SEO优化选项

46 min read

SEO 目的

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

SEO 优化方式

我们这里主要讲前端能参与和做的优化方式。比如很多 SEO 优化方式都有介绍：控制首页链接数量，扁平化目录层次，优化网站结构布局，分页导航写法这些等，但实际上，日常前端开发也充当不了网站整体设计的角色，只能是协调，这些大部分都是一开始就定好的东西。

比如新闻媒体类等网站比较重视 SEO 的，通常公司还会设有 SEO 部门或者是 SEO 优化工程师岗位，像上面说的，还有网页关键词、描述的就交给他们参与和提供，有些优化方式我们难以触及的就不细谈了，有兴趣的可以去了解。

next.js 的优化方案

当你想让一些东西在feed上看起来像样的时候，你可以使用一些叫做Open Graph Protocol的东西。它允许你在你的网站上自定义你的<meta>标签，这样当你把URL分享出去的时候，它就会看起来很好很美。

但问题是：如果你想在网站的不同页面上使用不同的元数据，你必须超越 "单页应用 "的路线。尽管我很喜欢SPA，但当涉及到每个页面的自定义元数据时，它们只是受到更多限制。

但是，有一个解决方案! 通过静态网站构建器，你可以在每个页面上编程定制<meta>标签。让我们用Next.js来举个例子。

假设你有一个有多个页面的网站(比如说，一个博客文章，也许？)，你有一些Layout组件，拉入Next内置的next/head。

page 页面next.js 标签头部标签

使用内建组件Head

import Head from 'next/head'
import Header from './Header'

export default function Layout({ children, pageTitle, description, ...props }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
        <title>{pageTitle}</title>
      </Head>
      <section>
        <Header />
        <div className="content">{children}</div>
      </section>
    </>
  )
}

通过 _document.js增加文档标记

_document.js只有在服务器端渲染的时候才会被调用，主要用来修改服务端渲染的文档内容，通常实现服务端渲染会使用一些css-in-js库(styled-jsx是 Next.js自带默认使用的css-in-js库) , 也可以用于初始化服务端时添加文档标记元素，比如自定义meta标签。

可填加的头部标签

  • 常规的描述标签
  <Head>
    <meta charSet="utf-8" />
    <meta httpEquiv="x-ua-compatible" content="ie=edge, chrome=1" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover"
      />
    <meta name="keywords" content="Next.js demo" />
    <meta name="description" content={'This is a next.js demo'} />
</Head>
  • og标签

og标签是一种新的http头部标记，即Open Graph Protocol（开放内容协议）。在页面添加这种协议可以让网页成为一个“富媒体对象”，表示同意网页内容可以被其他社会化网站引用等。

增加的og标签是可以被搜索引擎发现并评估权重的，也就是说你将原有meta信息优化手段同时使用到og标签当中，加强meta信息优化内容；对于权重提升和排名还是很有利的

在页面的中添加og标签，即添加meta Property=og标签。

主要的og标签属性：

og:type 表示页面的类型，常用值:article、news、book、movie、product……

og:title 页面的标题

og:description 页面的简单描述

og:url 页面地址

og:image 略缩图地址

og:site_name 页面所在网站名

og:videosrc 视频或者Flash地址

og:audiosrc 音频地址

Lighthouse 性能优化工具

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

从此处，您可以失败的测试为指示器，看看可以采取哪些措施来改进您的应用。

在控制台打开Lighthouse,点击生成报告:

image-20210303142050328

Lighthouse 指标

image-20210303142148633

性能评分

性能评分的分值区间是0到100，如果出现0分，通常是在运行 Lighthouse 时发生了错误，如果反复出现了0分的情况，可以在 Lighthouse 的 GitHub 仓库去反馈 bug。满分100分代表了站点已经达到了98分位值的数据，而50分则是75分位值的数据。

影响评分的性能指标

性能测试指标分成了 Metrics，Diagnostic，Opportunities 三部分。通常情况下，只有 Metrics 部分的指标项会对分数产生直接影响，Lighthouse 会衡量以下性能指标项：

  • 首次内容绘制（First Contentful Paint）。即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。
  • 首次有效绘制（First Meaningful Paint）。衡量了用户感知页面的主要内容（primary content）可见的时间。对于不同的站点，首要内容是不同的，例如：对于博客文章，标题及首屏文字是首要内容，而对于购物网站来说，图片也会变得很重要。
  • 首次 CPU 空闲（First CPU Idle）。即页面首次能够对输入做出反应的时间点，其出现时机往往在首次有效绘制完成之后。该指标目前仍处于实验阶段。
  • 可交互时间（Time to Interactive）。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。
  • 速度指标（Speed Index）。衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。
  • 输入延迟估值（Estimated Input Latency）。这个指标衡量了页面对用户输入行为的反应速度，其基准值应低于 50ms。

性能指标评分的计算

每一项性能指标对评分的贡献都有其计算逻辑，Lighthouse 会将原始的性能值映射成为 0-100 之间的数字。评分使用 HTTPArchive 上的真实站点性能数据作为样本，统计出对数正态分布。例如，FMP（First Meaningful Paint）的原始值是从页面初始化开始到主要内容渲染成功的耗时，根据真实站点的数据，顶级性能的站点的 FMP 值约为 1220ms，这个值会被映射成 Lighthouse 的 99 分。

针对不同的评分，Lighthouse 用了不同的颜色进行标注，分值区间和颜色的对应关系如下：

  • 0 - 49（慢）：红色
  • 50 - 89（平均值）： 橙色
  • 90 - 100（快）： 绿色

image-20210303142746866