SEO教程入门教程 SEO教程元标签 Canonical Schema Open Graph灿烂的番茄2026-08-062026-08-14

#SEO 元标签详解（下）：Canonical、Schema、Open Graph、Viewport

这是我在《独立站 SEO 实战》系列里写的第 11 篇。10 个重要元标签，这是最后四个，都属于技术向：Canonical、Schema、Open Graph、Viewport。

先给你结论： Canonical 声明页面规范网址、把分散的外链权重汇聚起来（必须指向真实网址）；Schema 用 JSON-LD 让搜索结果更丰富；Open Graph 控制分享卡片；Viewport 决定移动端适配，间接影响排名。

#七、Canonical（规范链接）标签

#作用

Canonical 告诉搜索引擎：当前网页的规范网址是哪个。

用 SEO 浏览器插件（Detailed SEO Extension、AITDK SEO Extension）就能检测到它。

检测 canonical 标签

#一个例子帮你理解

假设你的网址是 https://abc.com/ ，但爬虫在 reddit 上找到一个链接：https://abc.com/?r=reddit 。

在搜索引擎眼里，这是另一个网址；
可返回的页面内容跟 https://abc.com/ 一模一样；
搜索引擎就疑惑：你哪来这么多重复页面？

所以在首页 head 里加上：

1	<link rel="canonical" href="https://abc.com/">

这样不管爬虫从哪个带参数的网址进来，都知道规范的网址是 https://abc.com/ 。

#特别注意事项

你的真实网址是什么，就返回什么，不要全站统一返回首页地址——这里写错后果很严重。

比如一篇讲搞钱的文章，应该返回：

1	<link rel="canonical" href="https://abc.com/blog/how-to-make-money">

#权重汇聚的重要作用

假设你有很多外链，但链接都带了跟踪参数（?r=reddit、?r=ph）：

不设 canonical，谷歌以为多个网址都拿到了反链，权重就分散到各个参数网址上；
设了 canonical，谷歌把所有这些外链的权重汇聚到你的规范网址。

例子：你写文章想做 “How to make money” 这个词，投稿到各平台留下原文链接，也被很多博客转载加链接——但链接都带跟踪参数。不设 canonical，外链全浪费；设了，权重汇聚到一个网址，排名更容易上去。

#八、Schema Markup（结构化数据标记）

Schema 让搜索结果更丰富（星级、图片、FAQ 等）。

想呈现结构化结果，最好按谷歌文档要求主动提供结构化数据：

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=zh-cn

谷歌官方还有个标记助手：

https://www.google.com/webmasters/markup-helper/?hl=zh

谷歌结构化数据标记助手

步骤：

输入要标记的网址；
选数据类型；
在网页上点选内容并标记。

标记数据

生成的 JSON-LD 加到 head 里即可：

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "产品名称",
  "image": "产品图片地址",
  "description": "产品描述"
}
</script>

Open Graph 是 Facebook 提的，后来 LinkedIn 也支持；Twitter 搞特殊，弄了个 Twitter Cards。

最主要的 Open Graph 标签：

<meta property="og:title" content="显示的标题">
<meta property="og:url" content="网址，可以增加跟踪参数">
<meta property="og:description" content="描述">
<meta property="og:image" content="分享图片地址">

完整示例（参考 HIX.AI）：

<meta property="og:title" content="HIX.AI: Your Most Powerful, All-In-One AI Writing Copilot"/>
<meta property="og:description" content="Generate high-quality copies for ads, emails, blogs, and more in seconds with HIX.AI."/>
<meta property="og:url" content="https://hix.ai"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://hix.ai/featured-images/xxx.jpg"/>
<meta property="og:image:alt" content="图片描述"/>
<meta property="og:image:width" content="800"/>
<meta property="og:image:height" content="600"/>

为什么必须设：网页分享到微信、Facebook、Twitter 时，分享卡片显示什么标题、图片、描述，全由这些标签控制。不设置，分享出去的效果很难看，点击率也受影响。

#十、Viewport（视口）元标签

Viewport 用来配置网页在不同大小屏幕下的缩放和显示，简单说就是适配不同屏幕。

移动端友好占排名因素 5% 权重（见第 02 篇《谷歌 SEO 排名因素全解读》），所以适配手机和平板对 SEO 很重要。

通常代码：

1	<meta name="viewport" content="width=device-width, initial-scale=1"/>

“width=device-width”：页面匹配设备独立像素宽度；
“initial-scale=1”：CSS 像素和设备独立像素 1:1。

viewport 适配对比

看图：左边没设置，右边设置了，右边在手机上明显更好。

Viewport 虽然不直接算排名因素，但通过上面的分析，它是间接影响排名的——要配好。

#一句话记住

标签	作用	关键要点
Canonical	声明规范网址、汇聚权重	必须指向页面真实网址，别写错
Schema	结构化数据，丰富搜索结果	用谷歌标记助手生成 JSON-LD
Open Graph / Twitter Card	控制社交分享卡片	标题/图片/描述，分享必备
Viewport	移动端适配	移动友好间接影响排名