🏷️
免费 Meta 标签与 Open Graph 生成器
生成 SEO meta 标签、Open Graph 和 Twitter Card 标记，带实时谷歌搜索和社交分享预览。直接复制到页面 head 中。
加载后可离线使用
0 · 0/580px
0 · 0/920px
最佳：1200×630 px，小于 5 MB，使用绝对 https:// 链接。
标题 0/580px （建议 30–60 字符）描述 0/920px （建议 70–160 字符）
Google 搜索预览
example.com
您的页面标题显示在这里
您的 Meta 描述显示在这里。写得有吸引力可提高搜索结果点击率。
宽度只是估算：Google 按像素而不是字符数截断。
社交卡片预览
og:image 预览
example.com
页面标题
页面描述
粘贴到 <head> 中
至少填写上方一个字段以生成元标签。
常见用途
- 博客文章的元标签生成标题、描述和社交标签，使您的文章分享时看起来更好。
- 产品页面元标签使产品页面分享精美，在搜索结果中易于阅读。
- 落地页的元标签精确控制您的活动落地页在分享和搜索时的显示方式。
- 为任何Web应用生成元标签快速为新页面或网站构建完整的head元标签集。
- 修复丑陋的链接预览停止您的链接显示为裸露URL — 添加创建丰富预览卡的标签。
工作原理
所有标签组装和 head 解析都直接在你的浏览器中进行——不涉及服务器。工具使用 React 的 useMemo 响应式地构建 HTML 字符串，并使用浏览器原生的 DOMParser API 读取现有页面标记，用于导入/审核功能。
- 1表单输入驱动实时组装你输入时，useMemo 钩子会立即重新组装完整的标签块——标题、meta 描述、Open Graph 属性和 Twitter Card 属性——并转义特殊字符（&、<、>、"），使输出可以安全地直接粘贴到 HTML 中。
- 2通过浏览器的 URL 构造函数验证网址每个网址字段（页面网址、社交分享图片）都使用浏览器内置的 URL 构造函数验证。只有格式正确、主机名带点的 http:// 或 https:// 地址才能通过；无效值会禁用复制按钮并显示内联错误。
- 3导入：DOMParser 读取现有的 head 标记如果你粘贴现有的 <head> HTML 进行审核，工具会以惰性模式通过 DOMParser 处理——不执行脚本，也不发出网络请求。然后在解析后的文档中查询已知的 meta 选择器（og:title、twitter:description、canonical 链接等），并用找到的内容预填表单字段。
- 4实时 Google 和社交卡片预览工具使用同一表单状态实时渲染带样式的 Google 搜索结果和 Open Graph 卡片预览，让你在复制输出之前准确看到标题和描述会如何被截断。
相关工具
社交媒体图片调整器
将图片调整并裁剪到 2026 年各平台的精确尺寸 — Instagram、YouTube、TikTok、X、Facebook、LinkedIn 和 Pinterest — 配有安全区域指南和批量 ZIP。100% 浏览器操作，无需上传。
试一试文件保留本地
音频标签编辑器 (ID3)
编辑 MP3 ID3 标签 — 标题、艺术家、专辑、年份、流派和封面 — 100% 在您的浏览器中进行。无需上传，音频也不会被重新编码。免费且隐私保护。
试一试文件保留本地
URL Slug 生成器
将任意标题或文本转为 URL 友好的 slug。非常适合博客文章、CMS 页面和 SEO 优化的 URL。
试一试