Meta Tag Generator：创建SEO元标签
Meta Tag Generator生成title、description、Open Graph和Twitter Card标签，提供SERP、Facebook和Twitter的实时预览以及字符计数器。
Meta Tag Generator是什么？
每次我准备发布新页面、想在上线前看看它在Google、Facebook和Twitter上实际呈现的样子时，我就会用这个工具。它生成完整的HTML元标签块（基本SEO、Open Graph、Twitter Card），并并排渲染每个平台的像素级精确预览。在Input标签页填写、从Output复制、在Preview中验证。
主要功能
工具从一组输入生成三个标签块。基本SEO块涵盖<meta name="title">、<meta name="description">、<meta name="keywords">、<meta name="author">、<meta name="robots">和<link rel="canonical">。Open Graph块涵盖og:title、og:description、og:type、og:url、og:image、og:site_name和og:locale，类型选项包括website、article、product、video和music。Twitter Card块涵盖twitter:card、twitter:site、twitter:creator、twitter:title、twitter:description和twitter:image，支持Summary和Summary Large Image卡片。
字符计数器引导你达到合适的长度。Title显示当前/60，30〜60范围内变绿，30以下变黄，60以上变红。Description使用相同方案，目标为120〜160。三个实时预览随你输入更新：使用真实链接蓝（#1a0dab）、URL绿（#006621）和描述灰（#545454）的Google SERP预览；用你提供的OG图片渲染1.91:1图片卡片的Facebook预览；以及根据你的卡片类型设置在Summary和Summary Large Image之间切换的Twitter Card预览。
Robots下拉菜单提供四种标准指令组合：index, follow（默认）、index, nofollow、noindex, follow和noindex, nofollow。Output标签页将Basic、Open Graph和Twitter分为独立部分，每部分有单独复制按钮，外加用于组合块的Copy All按钮。
如何使用Meta Tag Generator
步骤1：填写Input标签页
打开即将推出: Meta Tag Generator。工具在Input标签页打开，包含三个部分。
基本SEO部分：
- Title：你的页面标题。字符计数器实时更新。保持在30〜60字符（绿色）以避免在搜索结果中被截断。示例：
TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole（53字符，绿色）。 - Description：你的元描述。目标120〜160字符（绿色范围）以完整显示。示例：
TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75.（137字符，绿色）。 - Keywords：逗号分隔的关键词。现代搜索引擎大多忽略此标签，但包含它无害。示例：
hiking boots, trail running, waterproof boots, vibram outsole。 - Author：可选作者名。
- Robots：从四种robots指令组合中选择。公开内容保持
index, follow。私有页面、管理区域或不希望被索引的重复内容使用noindex, nofollow。 - Canonical URL：此页面的首选URL。输入完整绝对URL（如
https://example.com/products/trailmaster-pro）。
步骤2：配置Open Graph标签
滚动到Open Graph部分：
- OG Type：主页和一般页面选"website"，博客文章选"article"，电商页面选"product"。
- OG Site Name：你网站的显示名（如"TrailMaster Outdoor Gear"）。
- OG Image：社交分享图片的完整URL。Facebook推荐1200×630像素。如果你提供可访问的URL，Facebook预览会渲染实际图片。
- OG URL：Open Graph的规范URL，通常与你的canonical URL相同。
步骤3：配置Twitter Card标签
滚动到Twitter Cards部分：
- Twitter Card Type："Summary"显示小方形缩略图。"Summary Large Image"显示大尺寸2:1图片，对大多数有视觉资源的内容是更好选择。
- Twitter Site：网站的Twitter/X用户名（如
@trailmaster）。 - Twitter Creator：内容作者的Twitter/X用户名。
步骤4：检查Output标签页
点击Output标签页。三个部分显示生成的标签：
基本标签示例：
<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />Open Graph标签示例：
<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />点击Copy All获取完整标签块以粘贴到你的<head>。
步骤5：在Preview标签页验证
切换到Preview标签页。三个实时预览同时渲染：
- Google SERP预览：title显示蓝色，canonical URL显示绿色，description在两行内被截断显示灰色。这与Google桌面搜索结果格式匹配。如果你的title超过60字符，会在此视觉截断，是缩短它的明确提示。
- Facebook卡片预览：显示OG图片（如果提供且可加载）、网站域名大写、title粗体和description。
- Twitter Card预览：显示twitter:card格式（Small或Large Image）、URL域名、title和description。预览图片来自
twitterImage（如已设置），否则回退到ogImage。
实用示例
示例1：博客文章
对于标题为"10 Best Hikes in the Scottish Highlands"的博客文章：
- Title：
10 Best Hikes in the Scottish Highlands - Complete Guide（53字符，绿色） - Description：
The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included.（143字符，绿色） - OG Type：article
- Robots：index, follow
SERP预览确认title不会被截断，description填满两行可用空间。
示例2：电商产品页面
对于产品页面，OG type设为"product"并提供图片URL。Facebook预览以1.91:1比例渲染产品图片，配合网站名、产品title和description。Twitter Large Image Card以2:1裁剪显示同样图片。
示例3：私有暂存页面
对于尚未准备索引的暂存环境页面，将Robots设为noindex, nofollow。生成的输出包含<meta name="robots" content="noindex, nofollow" />，告诉搜索引擎爬虫即使发现此页面也不要索引或跟踪链接。
提示和最佳实践
- 同步OG URL和canonical URL：为
og:url和canonical<link>标签使用相同绝对URL。不一致会导致社交分享引用错误的URL。 - title长度与截断：Google会截断在桌面结果中渲染宽度超过约600px的title。30〜60字符目标是可靠的代理指标，绿色表示在安全范围内。
- OG图片尺寸：工具为你提供的任何URL生成
og:image标签，但不验证图片尺寸。Facebook使用1200×630像素图片，Twitter Large Image Card使用1200×600。 - twitter:image回退到og:image：在Preview标签页，Twitter Card如设置了twitter:image则使用它，否则使用og:image。仅当你需要每个平台不同社交图片时才单独设置twitter:image。
- Keywords元标签：
<meta name="keywords">标签会生成，但自2009年起Google和Bing大多忽略。包含它以求完整，但不必投入时间优化。
常见问题与排查
title计数器显示红色但description正常：title超过60字符。缩短它或将细节移到description。title计数器以红色显示当前/60 (long)作为明确指标。
description计数器显示黄色：description不足120字符。Google可能用其页面内容自有片段替代。添加20〜40字符相关内容。
OG图片未在Facebook预览中显示：Preview标签页用<img>标签加载实际图片URL。如果URL在你的浏览器中无法公开访问（如本地开发URL），图片区域显示"No image"占位文本。标签在输出中仍正确生成。
Twitter预览即使有大图片也只显示小卡片：Twitter Card Type设为"Summary"而非"Summary Large Image"。将Twitter Card Type下拉切换到"Summary Large Image"以查看2:1预览。
Output标签页生成的标签为空：在Input标签页至少填写title和description。输出仅包含非空字段，空title字段不产生title标签。
隐私与安全
Meta Tag Generator完全在你的浏览器中运行。标签生成使用React的useMemo钩子从输入响应式计算输出，无需服务器往返。如果你提供OG图片URL，Preview标签页直接从源URL加载该图片，不经代理。Supporter成员可使用本地IndexedDB存储保存和恢复命名预设。
常见问题
title和description的最佳字符长度是多少？
工具为title使用30〜60字符（绿色范围），为description使用120〜160字符（绿色范围）。它们与Google用于SERP片段的典型渲染像素宽度限制一致。30字符以下（黄色）的title可能被视为单薄；超过60（红色）可能被截断。120以下（黄色）的description可能导致Google使用自己的摘录；超过160（红色）会被截断。
工具生成所有Open Graph属性吗？
工具生成核心OG标签：og:type、og:url、og:title、og:description、og:image、og:site_name和og:locale。它不生成像article:published_time这样的文章特定标签或像product:price这样的产品特定标签。这些需在复制生成输出后手动添加。
有哪些OG locale值可用？
默认OG locale是en_US。locale字段是文本输入，可输入任何有效locale代码（如fr_FR、de_DE、ja_JP）。工具不将此字段限制为下拉。
工具支持哪些Twitter Card类型？
工具生成summary（小方形缩略图、title、description和站点名）和summary_large_image（全宽2:1图片配title、description和站点名）。它不支持已弃用的app和player卡片类型。
我可以仅复制Open Graph标签而不复制基本SEO标签吗？
可以。Output标签页显示三个独立部分（Basic、Open Graph、Twitter），每个有自己的复制按钮。点击Open Graph部分的复制按钮仅复制那些标签。使用"Copy All"获取所有组合内容。
如何将生成的标签添加到我的网站？
将复制的标签粘贴到你HTML的<head>部分内。如果你使用WordPress、Shopify或Webflow等CMS，将它们粘贴到主题设置中的自定义<head>代码字段，或使用接受自定义元标签的SEO插件。对于Next.js等框架，粘贴到<Head>组件或使用metadata API。
相关工具
- 即将推出: 页面SEO分析器：审计现有实时页面的当前元标签、标题结构和页面SEO信号，识别你新元标签应解决的差距。
- 即将推出: SERP预览：用于在更新元标签前后微调title和description显示的专用SERP预览工具。
- 即将推出: Schema生成器：在元标签旁添加结构化数据标记，为文章、产品、活动等启用Google搜索富结果。
立即试用Meta Tag Generator：即将推出: Glyph Widgets Meta Tag Generator