Meta 标签生成器

生成 SEO 元标签、Open Graph 和 Twitter Card 代码

1

填写详情

基本元标签

Robots

Open Graph (OG) 标签

OG 标题、描述和 URL 自动继承自上方的基本元标签字段。

Twitter Card

标题和描述继承自基本元标签。如果为空，图片回退到 OG 图片。

2HTML 输出

<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />

什么是元标签？

元标签是位于页面 <head> 部分的 HTML 元素，可向搜索引擎和社交媒体平台提供有关页面的元数据。它们控制着您的页面在搜索结果、社交媒体分享和浏览器标签页中的显示方式。

标签类型说明

基本元标签

标题标签设置浏览器选项卡文本，是最重要的页面 SEO 元素。页面描述显示在搜索结果的标题下方。标题应控制在 60 个字符以内，描述控制在 160 个字符以内。

规范 URL (Canonical)

告诉搜索引擎哪个 URL 是页面的“官方”版本。这对于防止当相同的内容可以通过多个 URL 访问时出现重复内容问题至关重要。

Open Graph (OG)

控制您的页面在 Facebook、LinkedIn 和大多数社交平台上分享时的显示方式。OG 图片尤为重要 — 建议使用 1200×630px 的图片以获得最佳效果。

Twitter Card

控制您的页面在 Twitter/X 帖子中的显示方式。博客文章使用 summary_large_image，常规页面使用 summary。如果未指定图片，将回退到 OG 图片。

最佳实践

  • ✓ 将标题保持在 60 个字符以内，以避免在搜索结果中被截断
  • ✓ 将描述保持在 160 个字符以内 — Google 可能会截断更长的描述
  • ✓ 始终设置规范 URL 以防止重复内容问题
  • ✓ 为每个页面使用独特的标题和描述 — 避免重复
  • ✓ OG 图片应为 1200 × 630px 以在社交平台上获得最佳显示
  • ✓ 将您的主要关键词自然地融入标题和描述中

如何将元标签添加到您的网站

复制生成的 HTML 后，请根据您的平台将它添加到您的网站中：

纯 HTML

打开您的 HTML 文件，并将生成的代码粘贴到 <head> 标签中，在任何 CSS 或 JS 链接之前：

<!DOCTYPE html>
<html>
<head>
<!-- 在此处粘贴您的元标签 -->
<title>My Page</title>
<meta name="description" content="..." />
...
</head>

WordPress

使用诸如 Yoast SEO 或 Rank Math 这样的 SEO 插件 — 它们提供标题、描述和 OG 标签字段，无需修改代码。如果您需要自定义标签，请转到外观 → 主题编辑器 → header.php 并在 </head> 之前粘贴代码。或者，使用 Insert Headers and Footers 插件。

Next.js / React

使用 Next.js 内置的 <Head> 组件或 metadata 导出（应用路由机）：

import Head from 'next/head'

export default function Page() {
return (
<Head>
<!-- 在此处粘贴您的元标签 -->
</Head>
)
}

Shopify

转到在线商店 → 主题 → 编辑代码，打开 theme.liquid，并将元标签粘贴到 <head> 部分内。对于每个页面的 SEO，在每个页面/产品编辑器中使用内置的 SEO 字段。

常见问题 (FAQ)

meta keywords（元关键词）对 SEO 还重要吗？

不重要。自 2009 年以来，Google 就忽略了 keywords 元标签。然而，一些较小的搜索引擎可能仍在使用它。由于完整性，我们将其包含在工具中，但这一项是可选的。

我应该设置 noindex 还是 nofollow？

对于不想出现在搜索结果中的页面（后台页面、感谢页面等），请使用 noindex。如果不想让搜索引擎跟踪页面的链接，使用 nofollow。大部分页面应当保持默认设置。

OG 标签与 Twitter Card 之间有什么区别？

Open Graph 标签被 Facebook、LinkedIn 和大多数平台使用。Twitter Card 则是专用于 Twitter/X 的。如果缺少 Twitter 专有标签，Twitter 会回退使用 OG 标签，但两者皆有可保证在所有地方获得最佳的展示效果。

我该如何测试我的元标签？

请使用 Facebook 共享调试器 测试 OG 标签，使用 Twitter Card Validator 测试 Twitter 标签，并使用 Google Search Console 测试您的基本 SEO 元标签。