Meta 标签生成器
一站式生成 SEO 和社交媒体所需的 Meta 标签。 实时预览 Google、Twitter 和 Facebook 的分享效果，提升点击率。
基础信息
推荐长度：50-60 字符
推荐长度：150-160 字符
用逗号分隔，虽然 Google 已不再看重，但其他搜索引擎可能使用
社交媒体 (Open Graph)
推荐尺寸: 1200 x 630 像素
生成的 HTML
<!-- Primary Meta Tags --> <title>My Awesome Website</title> <meta name="title" content="My Awesome Website" /> <meta name="description" content="The best place to find amazing things." /> <meta name="keywords" content="website, generator, tools" /> <meta name="author" content="" /> <meta name="robots" content="index, follow" /> <meta name="theme-color" content="#000000" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com" /> <meta property="og:title" content="My Awesome Website" /> <meta property="og:description" content="The best place to find amazing things." /> <meta property="og:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" /> <meta property="og:site_name" content="My Site" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://example.com" /> <meta property="twitter:title" content="My Awesome Website" /> <meta property="twitter:description" content="The best place to find amazing things." /> <meta property="twitter:image" content="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&h=630&fit=crop" />
Google 搜索预览
Twitter / Facebook 预览
Meta 标签最佳实践
Title (标题)
网页最重要的标签。虽然没有严格限制，但 Google 搜索结果通常显示前 **50-60 个字符**。务必包含核心关键词。
Description (描述)
对网页内容的简要总结。虽然不直接影响排名，但决定了用户的**点击率 (CTR)**。推荐长度 **150-160 个字符**。
Open Graph (社交分享)
控制链接在 Facebook、Twitter、微信等平台分享时的显示效果。一张高质量的 `og:image` 能显著提升社交流量。
Robots
控制搜索引擎是否收录该页面 (`index`) 以及是否跟踪页面上的链接 (`follow`)。对于私密页面，请使用 `noindex`。
常见问题 FAQ
Keywords 标签还有用吗？
Google 官方已明确表示不再将 meta keywords 作为排名因素。但是，Bing 和其他小型搜索引擎可能仍会将其作为参考。如果您有资源，可以适量添加；如果没有，忽略它也不会有太大影响。
如何验证我的 Open Graph 标签配置正确？
您可以使用 Facebook 提供的 [Sharing Debugger](https://developers.facebook.com/tools/debug/) 或 Twitter 的 [Card Validator](https://cards-dev.twitter.com/validator) 来测试您的链接预览效果。
meta viewpiont 是什么？
虽然本工具主要关注 SEO，但 viewport 标签对于移动端适配至关重要。现在的框架（如 Next.js）通常会自动添加它。它告诉浏览器如何控制页面的尺寸和缩放。