你需要了解的10个重要SEO元标签（下）

中文版

你在第一部分处理了核心标签，在第二部分处理了行为控制标签。现在我们把剩下的活儿干完。这一部分覆盖四个在你面向海外市场时特别重要的标签：Twitter Cards、viewport标签、charset声明和hreflang。

这些都不是什么魔法。但跳过它们会带来实实在在的问题：链接预览失效、文字乱码、移动端布局赶跑用户，或者谷歌把错误的语言版本展示给访客。我们一个个来解决。

1. Twitter Cards：控制你的页面在分享时的样子

当有人在X（原Twitter）上分享你的URL时，平台会展示一张预览卡片。你可以通过Twitter Card元标签来控制这个预览。

你会用到的两种主要卡片类型：

• summary：显示一个小缩略图、标题和描述。适合普通博客文章。
• summary_large_image：显示一张大横图，标题和描述在下方。更适合产品页、作品集页面，或者任何视觉元素重要的页面。

你需要的四个标签：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description here.">
<meta name="twitter:image" content="https://yoursite.com/images/og-cover.png">

重要提醒： X/Twitter在没有twitter:标签时会回退到Open Graph标签。如果你在第二部分已经正确设置了Open Graph，大多数情况下你已经覆盖到了。唯一值得显式添加的标签是twitter:card，用来选择大图布局。其余会从OG继承。

对于summary_large_image，使用大约1200x630像素的横图。竖图或方图会被裁剪得很难看。

2. Viewport元标签：确保移动端用户能正常阅读你的页面

这个标签告诉移动浏览器如何缩放你的页面。没有它，为桌面设计的页面在手机上会显示成缩得很小的版本。用户得捏合缩放才能看清内容。他们不会留下来。

标准标签：

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

它的作用： 把视口宽度设置为设备的屏幕宽度，初始缩放级别设为1.0（不缩放）。

实话实说： viewport标签本身不是排名因素。谷歌不会看一眼就说“这个页面排名更高”。但谷歌使用移动优先索引。这意味着谷歌像移动用户看到的那样爬取和索引你的页面。如果你的页面在移动端显示有问题，谷歌会把它当作移动可用性问题。糟糕的移动体验会导致更高的跳出率，这间接损害你的排名。

规则：如果你面向海外市场建站，假设大部分流量来自手机。viewport标签没有商量余地。

3. Charset声明：防止乱码

Charset声明告诉浏览器你的页面使用哪种字符编码。现代网页的标准是UTF-8，它支持所有语言，包括拉丁字母、西里尔字母、阿拉伯语和CJK字符。

<meta charset="utf-8">

放在哪里： 这应该是你<head>里的第一个标签。在标题之前，在所有其他东西之前。

这对SEO为什么重要？如果你的页面出现乱码，爬虫无法正确读取。它们可能错误解析你的内容、误解语言，或者无法正确索引页面。你为SEO做的其他所有事情都依赖于爬虫能读取你的页面。Charset标签是地基。

如果你跳过它，包含非英文字符的页面可能会显示成“é“而不是”é”。这不仅是难看的问题。对用户来说不可读，对搜索引擎来说也是困惑。

4. Hreflang：告诉谷歌展示哪个语言版本

这是本系列中最复杂的标签，也是你作为出海建站者最相关的标签。Hreflang告诉谷歌，对于特定国家的用户，应该展示页面的哪个语言和地区版本。

格式如下：

<link rel="alternate" hreflang="en" href="https://yoursite.com/page">
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/page">
<link rel="alternate" hreflang="fr" href="https://yoursite.com/fr/page">

你把这些标签放在每个页面版本的<head>中。如果你有同一内容的英文页、德文页和法文页，每个页面都必须列出所有三个版本，包括它自己。

两条不能破的规则：

1. 自引用： 每个页面必须包含指向自己URL的链接，带有自己的hreflang代码。
2. 互惠： 如果页面A链接到页面B，页面B必须链接回页面A。如果你忘了返回链接，谷歌可能会忽略你所有的hreflang信号。

要避免的常见错误：

• 缺少返回链接： 最常见的错误。你在英文页上加了hreflang，但忘了在德文页上加。
• 错误的语言/地区代码： 语言用ISO 639-1（en、de、fr），地区用ISO 3166-1 alpha-2（US、GB、DE）。en-US和en-GB是不同的。不要发明代码。
• 把hreflang指向非规范URL： 你在hreflang中引用的URL必须是该页面的规范版本。如果你有跟踪参数或重复URL，先修复那些。

实话实说： Hreflang不是那种提升你排名的排名因素。它是一个相关性信号。它告诉谷歌向哪个用户展示哪个版本。没有它，谷歌可能把英文页展示给德文用户，或者更糟，把你的语言版本当作重复内容，全部压制。

如果你的每种语言少于五个页面，你可以手动管理hreflang。如果更多，使用插件或能自动生成这些标签的CMS。

系列回顾：10个元标签的完整清单

你在整个三部分系列中已经覆盖了全部十个重要元标签。以下是完整清单，按优先级分组。

第一梯队：先做这些

1. 标题标签 — 搜索结果中可点击的标题。你相关性方面的主要排名信号。
2. Meta描述 — 标题下方的摘要。不是排名因素，但它控制点击率。
3. 标题标签（H1-H3） — 为可读性和关键词相关性构建内容结构。

第二梯队：行为控制 4. Robots元标签 — 告诉搜索引擎是否索引页面和跟踪链接。 5. Canonical标签 — 通过指定首选URL防止重复内容问题。 6. Open Graph标签 — 控制页面在Facebook、LinkedIn等社交平台分享时的样子。

第三梯队：打磨和国际化 7. Twitter Cards — 控制页面在X/Twitter分享时的样子。 8. Viewport标签 — 确保页面在移动设备上正确显示。 9. Charset声明 — 防止乱码，确保爬虫能读取你的内容。 10. Hreflang标签 — 告诉谷歌向哪个用户展示哪个语言/地区版本。

接下来做什么

你有了完整的技术基础。现在付诸实践。三个第一梯队标签（标题、描述、标题标签）是你每个页面都要编辑的。其余的设置一次，基本不用再动。

要一个把这三个第一梯队标签变成可重复的每页流程的实用工作流，可以看配套文章“从TDK到TDH”。它给你一个简单框架，不用想太多就能为每个页面写标题、描述和标题标签。

建你的站，设置这些标签，然后去做内容。元标签是画框。内容是画。

(文中案例与数字均为来源材料中提及，未经独立核实。)

系列：出海建站