ToolKitNexus
SEO 工具

Meta 标签生成器

生成 SEO 友好的 Meta 标签,包括 Title、Description、Open Graph 与 Twitter Card。

Meta 标签是位于页面 <head> 中、向搜索引擎与社交平台描述页面内容的 HTML 元素。Title 与 meta description 决定搜索结果摘要的展示,Open Graph 标签(og:title、og:description、og:image)与 Twitter Card 则控制链接分享到社交媒体时的卡片样式。本工具生成一套完整、符合规范的 Meta 标签,可直接复制到你的 HTML 中。

HTML
<!-- Primary Meta Tags -->
<title>My Awesome Page</title>
<meta name="title" content="My Awesome Page">
<meta name="description" content="A short, compelling description that shows up in search results and social shares.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="A short, compelling description that shows up in search results and social shares.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/page">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="A short, compelling description that shows up in search results and social shares.">
<meta name="twitter:image" content="https://example.com/og.png">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/page">

使用说明

  1. 输入页面标题、描述与 URL。
  2. 自定义 Open Graph 字段。
  3. 复制生成的 HTML。

常见问题

什么是 Open Graph?

Open Graph 是 Meta(Facebook)制定的协议,能把网页变成社交信息流中的富媒体卡片。其标签 og:title、og:description、og:image、og:url 决定链接在 Facebook、LinkedIn、Slack、Discord 及众多聊天应用中分享时显示的标题、摘要与缩略图。

Title 和 meta description 应该多长?

标题建议 50–60 个字符(约 600 像素),meta description 建议 150–160 个字符。Google 会截断超出部分,因此关键词要尽量前置。

meta keywords 标签还有用吗?

没有了。Google 自 2009 年起就忽略 keywords 标签,主流搜索引擎均不将其用于排名。把精力放在 title、meta description 和 Open Graph 标签上更值得。

twitter:card 是什么?

twitter:card 告诉 X(Twitter)如何渲染链接预览:"summary" 显示小方形缩略图,"summary_large_image" 显示大图。预览图由 twitter:image 指定(缺省时回退到 og:image)。