Meta 标签生成器
根据标题、描述、规范网址、图片和网站名称，为页面生成 SEO、Open Graph 和 Twitter 卡片 Meta 标签。
Meta 标签生成器 — 填入页面标题、描述、规范网址、图片和网站名称，即可获得可直接粘贴到 HTML head 的 SEO、Open Graph 和 Twitter 卡片 Meta 标签代码块。实时的 Google 搜索结果预览和社交卡片预览会显示页面在搜索中以及被分享时的样子。所有内容都在浏览器中生成——不会上传你页面的任何信息。
Meta 标签生成器 是什么？
Meta 标签生成器是一款免费的在线工具，可将几项页面信息转换为一整套 HTML Meta 标签：标准 SEO 标签（title、meta description、canonical 链接）、Open Graph 标签（og:title、og:description、og:type、og:url、og:image、og:site_name）以及 Twitter 卡片标签（twitter:card、twitter:title、twitter:description、twitter:image）。营销人员、博主和开发者在发布页面或文章时用它来控制页面在 Google 搜索结果中的呈现，以及链接在 Facebook、LinkedIn、X/Twitter、Slack 和 Discord 上展开时的样子。选择 og:type（website、article、product、profile 或 video.other）和 twitter:card 样式（summary、summary_large_image、app 或 player），工具只会写出你已填写字段对应的标签行。它输出纯 HTML 标签——不会抓取你的网站，也不会替你读取页面。
如何使用 Meta 标签生成器
- 输入页面标题——它会成为 <title>、og:title 和 twitter:title 标签。
- 撰写一段 Meta 描述（约 150–160 个字符），用于 description、og:description 和 twitter:description 标签。
- 填写页面的规范网址，以及用于链接预览的绝对图片网址。
- 添加网站名称，并从下拉菜单中选择 og:type 和 twitter:card。
- 从输出框复制生成的 HTML 代码块，粘贴到页面的 <head> 中。
- 使用 Google 搜索结果预览和社交卡片预览，在发布前核对效果。
示例
博客文章标签
输入
标题: 如何烘焙酸面包 描述: 在家烘焙酸面包的入门指南。 网址: https://blog.example.com/sourdough og:type: article
输出
<title>如何烘焙酸面包</title> <meta name="description" content="在家烘焙酸面包的入门指南。" /> <link rel="canonical" href="https://blog.example.com/sourdough" /> <meta property="og:title" content="如何烘焙酸面包" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
大图社交卡片
输入
图片: https://example.com/og.png twitter:card: summary_large_image
输出
<meta property="og:image" content="https://example.com/og.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
特殊字符会被转义
输入
标题: Tips & Tricks for "Pros"
输出
<title>Tips & Tricks for "Pros"</title>
常见问题
- 这个工具会生成哪些 Meta 标签？
- 它会生成标准 SEO 标签（<title>、meta description 和 canonical 链接）、Open Graph 标签（og:title、og:description、og:type、og:url、og:image、og:site_name）以及 Twitter 卡片标签（twitter:card、twitter:title、twitter:description、twitter:image）。只会包含你已填写字段对应的标签行，因此不会出现空的占位标签。
- og:type 和 twitter:card 有什么区别？
- og:type 告诉平台页面是什么类型的对象——website、article、product、profile 或 video.other——这会影响链接展开的方式。twitter:card 选择在 X/Twitter 上的布局：summary 是小缩略图，summary_large_image 显示大横幅图片，而 app 和 player 则用于应用和媒体。请选择与内容相符的组合。
- 图片网址需要是绝对地址吗？
- 是的。og:image 和 twitter:image 必须是以 https:// 开头的完整绝对网址，因为抓取程序会从你站点外部获取它们——像 /og.png 这样的相对路径无法加载。为获得最佳效果，大图卡片请使用 1200×630 的图片。
- 这个工具会抓取或读取我的线上页面吗？
- 不会。它只会把你输入的值格式化为 HTML Meta 标签。它不会获取、抓取或分析任何网址——规范网址和图片网址会被原样写入标签，而不会被访问。
- 我的数据会被发送到服务器吗？
- 不会。标签完全在你的浏览器中用 JavaScript 生成。你输入的任何内容——包括未发布的标题、网址或描述——都不会被上传、存储或发送到任何地方，因此在私密或未上线的页面上使用也很安全。