Meta Tag Generator
Generated Meta Tags
<meta name="twitter:card" content="summary">技术详情
Meta Tags 生成器的工作原理
工具功能
Meta Tags 生成器可根据页面信息自动生成完整的 HTML <meta> 标签集合,覆盖 SEO、社交分享和移动端三大场景。你需要输入页面标题、描述、关键词、作者、URL、网站名称和 favicon 路径等基本信息,工具自动生成对应的 meta 标签:标准 SEO 标签(title、description、keywords、robots、canonical)、Open Graph 标签(og:title、og:description、og:image、og:url)、Twitter Card 标签(twitter:card、twitter:title)、和移动端标签(viewport、theme-color)。一键复制即可粘贴到 HTML head 中。
常见开发者使用场景
Meta Tags 标准详解
三大 meta 标签体系的核心作用:
- 标准 SEO Meta:<title> 和 <meta name="description"> 是搜索引擎结果页面(SERP)中显示的标题和摘要。keywords 已不被 Google 使用。robots 控制爬虫行为。
- Open Graph:由 Facebook 提出的标准,控制链接在 Facebook、LinkedIn、Discord 等平台中的预览卡片。og:image 是最重要的字段——没有好图片的分享链接点击率大降。
- Twitter Card:Twitter/X 的卡片格式,支持 summary(小图)、summary_large_image(大图)、player(视频)等类型。twitter:card = summary_large_image 是最推荐的选择。
常见陷阱与注意事项
- 描述长度:meta description 限制约 155-160 字符(Google SERP 截断点),OG description 建议 200 字符以内。过长会被截断显示...
- 图片尺寸:og:image 推荐 1200×630 像素(1.91:1 比例),小于 200×200 的图片可能无法显示在分享卡片中。
- 重复内容:SEO 和 OG 标签的标题/描述通常相同但并非必须——可以针对不同平台优化不同的文案。
- 动态生成:JavaScript SPA(单页应用)动态渲染的 meta 标签大多数社交平台爬虫无法识别——需要 SSR(服务端渲染)或 SSG(静态站点生成)。
何时使用此工具而非代码
在创建新页面、批量生成 SEO 标签、或调试社交分享预览时使用此工具。对于需要动态生成 meta 标签的场景(如电商商品详情页),推荐使用 Next.js Metadata API、React Helmet 或 Vue Meta 等框架级方案。