Meta 标签生成器

可视化配置网页 Meta 标签，一键生成 HTML 代码

标签配置

0/60
0/200
0/220
0.1 ~ 3.0

生成的 HTML 代码

2 行
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用说明

  • 将生成的代码复制到 HTML 文件的 <head> 标签内即可
  • charset 决定浏览器如何解析网页编码，推荐 UTF-8
  • viewport 控制移动端显示效果，自适应模式可让页面在手机上正常浏览
  • keywords 虽然现代搜索引擎权重降低，但仍有辅助作用
  • description 会显示在搜索引擎结果中，影响点击率
  • robots 告诉搜索引擎爬虫是否允许抓取和收录

Meta标签生成器 - SEO优化Meta代码制作工具

Meta标签生成器可以帮助你快速生成网页所需的 Meta 标签代码，包括 SEO 优化标签（description、keywords）、Open Graph 社交分享标签、视口设置（viewport）等。正确配置 Meta 标签有助于提升搜索引擎排名和社交平台分享效果。

下面介绍 Meta 标签的作用、使用方法和 SEO 最佳实践。

什么是 Meta 标签

Meta 标签是 HTML 文档 head 区域的元数据标签，用于向浏览器和搜索引擎提供网页的基本信息。虽然用户在页面上看不到 Meta 标签的内容，但它们对 SEO 排名、社交分享预览和移动端适配都至关重要。

常见的 Meta 标签包括：description（网页描述）、keywords（关键词）、viewport（视口设置）、robots（爬虫指令）、Open Graph 标签（社交分享预览）、Twitter Card 标签等。每种标签都有特定的用途和最佳配置方式。

核心功能

SEO 优化

生成 description、keywords 等 SEO 标签

Open Graph

生成社交平台分享所需的 OG 标签

视口设置

配置移动端适配的 viewport 标签

一键复制

生成的代码一键复制到项目中

Twitter Card

生成 Twitter 分享卡片标签

Robots 配置

设置搜索引擎爬虫抓取规则

使用教程

  1. 填写网页标题、描述和关键词等基本信息。
  2. 根据需要配置 Open Graph 标签（用于社交分享预览）。
  3. 设置视口参数（通常保持默认即可适配移动端）。
  4. 点击生成代码，一键复制到 HTML 文件的 head 区域。

适用场景

  • SEO 优化 - 为新网页配置搜索引擎元数据
  • 社交分享 - 配置 Open Graph 标签控制分享预览
  • 移动适配 - 设置 viewport 标签确保移动端正常显示
  • 网站改版 - 批量更新所有页面的 Meta 标签

SEO Meta 标签最佳实践

title 标签应控制在 60 个字符以内，包含核心关键词；description 应在 150-160 个字符之间，准确概括页面内容，影响搜索结果的点击率；keywords 标签虽然 Google 已不再参考，但部分搜索引擎仍会使用。

Open Graph 标签对社交分享至关重要：og:title 控制分享标题、og:description 控制描述、og:image 控制预览图片。建议为每个页面配置完整的 OG 标签，确保在微信、微博等平台分享时有良好的预览效果。

常见问题

Meta 标签对 SEO 有多大影响？

Description 仍然影响搜索结果展示的点击率，Keywords 的影响已减弱，但 Open Graph 对社交分享很重要。Title 标签是最重要的 SEO 因素之一。

需要填写所有字段吗？

不需要，根据实际情况填写即可，空字段不会生成对应标签。建议至少填写 title、description 和 viewport。

生成的代码放在哪里？

放在 HTML 文件的 head 标签内，其他 meta 标签之后。确保在 body 标签之前。

description 写多长合适？

建议 150-160 个字符。超过 160 个字符的部分会被搜索引擎截断显示，太短则无法充分描述页面内容。

Open Graph 图片有什么要求？

建议尺寸 1200x630 像素，格式为 JPG 或 PNG，文件大小不超过 5MB。这是社交平台显示效果最佳的尺寸。

viewport 标签一定要加吗？

是的，如果不设置 viewport，移动端浏览器会以桌面宽度渲染页面，导致字体过小需要手动缩放。建议所有网页都添加 viewport 标签。