元标签生成器
填写表格(包括页面标题、描述、标准URL、社交图片、作者信息、网站名称及Twitter账号),生成器便会输出一段可直接粘贴的元标签块,涵盖SEO基础要素、Open Graph(适用于Facebook、LinkedIn、Discord、Slack)、Twitter卡片、网站图标/苹果触控图标,以及可选的Article或Product类型的Schema.org JSON -LD元数据。此功能在手动配置静态网站或向仅提供原始<head>编辑器的CMS添加元数据时尤为实用。
如何创建标题片段
-
1
输入页面元数据
标题、描述、标准网址、作者、网站名称。
-
2
添加社交图片链接
适用于`og:image`和`twitter:image`两种型号,1200×630分辨率最为理想。
-
3
选择选项
Twitter卡片类型、机器人指令、主题颜色、Schema.org类型。
-
4
复制输出内容
一组HTML标签`<meta>`,可直接粘贴在`<head>...</head>`之间。
生成器产生的内容
<!-- Primary Meta -->
<title>Page title,Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">
逐字段指导
- 标题: 50–60个字符。请包含主要关键词,并在末尾注明品牌名称:
Page title,Brand。 - 描述: 140–160个字符。单独阅读时效果良好。避免使用在多页中重复出现的标准化模板文字。
- 规范链接(Canonical): 绝对URL,包含
https://。与og:url匹配。 - OG 图片: 最小尺寸为1200×630像素(Facebook推荐比例为1.91:1),支持 JPG 或 PNG 格式,文件大小不超过8MB。
- Twitter卡片: 若图片质量良好,请使用
summary_large_image;若为小尺寸缩略图,请使用summary。 - 机器人指令(robots):
index, follow用于公开页面;noindex, nofollow用于预发布或内容单薄的页面。
可选附加功能
- JSON-LD(适用于文章或产品)可让谷歌显示丰富的搜索结果(作者、发布日期、价格、评分星级)。
theme-color可为安卓版 Chrome 浏览器及 iOS 版 Safari 浏览器的界面颜色进行设置。og:locale适用于多语言网站(例如en_US、es_ES)。og:type=article的附加项:article:published_time、article:author、article:section、article:tag。
该生成器可避免的常见错误
- 忘记设置视口标签。 该页面在移动设备上以桌面宽度显示,缩放级别为0.3。
- 在
<title>、og:title和twitter:title中存在不同标题,且共享卡片信息不一致。 og:image中的相对图像URL:Facebook无法解析这些链接,导致卡片无法显示。- 缺少
og:type参数。 默认值可使用,但 Facebook 更推荐使用明确指定的数值。
常见问题
从技术层面而言,当Twitter自身标签缺失时,系统会自动切换至Open Graph模式;因此即使仅设置OG标签,Twitter仍会显示卡片界面。添加Twitter专属标签可自定义使用体验(例如调整图片宽高比)。
1200×630像素(宽高比1.91:1)。Facebook和LinkedIn会以全尺寸显示该图片;Twitter则会将其裁剪为摘要卡片。请勿将关键内容置于图片边缘,画面中央60%区域为最佳显示范围。
无需该功能,页面排名依然良好。当内容类型符合Schema.org规范时,JSON-LD 可实现丰富的展示效果(如食谱卡片、常见问题折叠菜单、产品列表等)。请根据实际需求灵活添加该功能。
在您的HTML代码中,<head>与</head>之间应放置这段代码,以避免任何外部样式表或脚本影响解析器的访问速度。
不。所有内容均在您的浏览器中本地生成。
相关工具
ASCII 表参考
完整 ASCII 表,覆盖 0 到 127;列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法,包括 NUL、LF、DEL。
HTML 字符参考
可搜索的 HTML 实体列表,含命名代码与数值代码,并支持一键复制特殊字符和符号。
键盘快捷键参考
搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。
邮箱验证器
验证邮箱地址:RFC 5322 语法检查、实时 MX 记录查询,并显示本地部分、域名和长度详情。不会发送任何邮件。
编辑器配置生成器
根据你的缩进样式与大小、行尾、字符集和空格规则生成 .editorconfig 文件,让不同集成开发环境(IDE)和编辑器的格式保持一致。
证书解码器
粘贴一张 X.509 PEM 证书,并查看解码后的字段:主体、颁发者、序列号、签名算法、有效期及主体备用名称(SAN)。
此工具还提供其他语言版本
- 메타 태그 생성기 [KO]
- Generator metatagów [PL]
- Penghasil Meta Tag [ID]
- เครื่องสร้างเมตาแท็ก (Meta Tag Generator) [TH]
- Gerador de Meta Tags [PT]
- Meta-taggenenerator [NL]
- Metataggsgenerator [SV]
- Meta-Tag-Generator [DE]
- Generador de Meta Tags [ES]
- メタタグジェネレーター [JA]
- Bộ tạo thẻ siêu dữ liệu (Meta Tag Generator) [VI]
- Générateur de balises Meta [FR]
- مولد علامات التغليف (Meta Tags Generator) [AR]
- Meta Etiket Üreticisi [TR]
- Meta Tag Generator [EN]
- Generatore di Meta Tag [IT]
- Генератор мета-тегов [RU]