元标签生成器

0/60
0/160
Robots

填写表格(包括页面标题、描述、标准URL、社交图片、作者信息、网站名称及Twitter账号),生成器便会输出一段可直接粘贴的元标签块,涵盖SEO基础要素、Open Graph(适用于Facebook、LinkedIn、Discord、Slack)、Twitter卡片、网站图标/苹果触控图标,以及可选的Article或Product类型的Schema.org JSON -LD元数据。此功能在手动配置静态网站或向仅提供原始<head>编辑器的CMS添加元数据时尤为实用。

如何创建标题片段

  1. 1

    输入页面元数据

    标题、描述、标准网址、作者、网站名称。

  2. 2

    添加社交图片链接

    适用于`og:image`和`twitter:image`两种型号,1200×630分辨率最为理想。

  3. 3

    选择选项

    Twitter卡片类型、机器人指令、主题颜色、Schema.org类型。

  4. 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_USes_ES)。
  • og:type=article 的附加项: article:published_timearticle:authorarticle:sectionarticle:tag

该生成器可避免的常见错误

  • 忘记设置视口标签。 该页面在移动设备上以桌面宽度显示,缩放级别为0.3。
  • <title>og:titletwitter: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>之间应放置这段代码,以避免任何外部样式表或脚本影响解析器的访问速度。

不。所有内容均在您的浏览器中本地生成。

相关工具

此工具还提供其他语言版本