Skip to content
Meta 标签生成器
Tools

Meta 标签生成器

生成 SEO、Open Graph 与 Twitter Card 元标签,实时预览。

Search-engine indexing (robots)
Listing
Links
Extra directives
Google preview
E Example https://example.com › page

Page title

Your meta description preview appears here.

Facebook · Open Graph
1200 × 630
EXAMPLE.COM Page title Your meta description preview appears here.
X · Twitter Card
example.com
Generated <head> tags

Runs entirely in your browser. Nothing is uploaded.

在一个地方生成SEO、Open Graph和Twitter标签

这个Meta标签生成器将一个简短的表单转化为完整的、可直接复制的SEOOpen GraphTwitter Card Meta标签集合。填写标题、描述、URL和预览图片,它会为您生成完整的<head>代码块:标题、Meta描述、canonical、robots、charset和viewport,以及富媒体社交预览所需的每个og:twitter:标签。无需安装,无需注册,完全在浏览器中运行。

当您输入时,三个实时预览——Google、Facebook和X——会实时更新,让您在发布前就能看到页面在搜索结果和社交媒体中的确切显示效果。当标题或描述过长时,字符计数器会变成琥珀色提示。

真正重要的Meta标签

现代网页只需要少量HTML Meta标签就能为搜索和分享做好准备。<title><meta name="description">标签决定了您在Google中的搜索摘要,是最直接影响点击率的两个字段。viewportcharset标签确保页面在移动端正确渲染。canonical链接防止相同内容在多个URL下产生重复内容问题。robots标签控制页面是否被索引。

该生成器始终包含必要元素,仅在您填写时才添加可选的keywordsauthor字段。keywords标签自2009年起已被Google忽略,不再影响排名,但生成器仍保留该字段以兼容仍读取它的内部搜索引擎。

通过Open Graph和Twitter Card获得更好的链接预览

当有人在Facebook、LinkedIn、WhatsApp、Slack、Discord或X上分享您的链接时,这些平台会查找Open Graphog:)和Twitter Cardtwitter:)标签来构建富媒体预览卡片。没有这些标签,链接显示为纯文本;有了这些标签,它会展示您的标题、描述和1200×630的预览图。

这里的Open Graph生成器一次生成完整的og:标签集和对应的twitter:标签,包括图片alt文本。X/Twitter优先读取自己的标签,但对缺失内容会回退到og:标签,因此完整的og:集合加上twitter:card和twitter:site就足以覆盖两个平台。

通过robots Meta标签控制索引

内置的robots Meta标签生成器让您只需点击即可在indexnoindex之间以及follownofollow之间切换。对感谢页、测试站点、管理页面和不希望出现在Google中的薄内容筛选页使用noindex

当页面设置为noindex时,Google预览卡会显示警告,防止您意外发布错误的robots设置。生成的标签还支持高级指令,如noarchive(阻止Google显示缓存版本)和nosnippet

与SEMrush、Yoast和Rank Math的比较

大多数替代工具都有依赖性或费用。SEMrush在站点审核中包含Meta标签分析,但起价为每月129美元。Yoast SEORank Math是WordPress插件,无法用于Shopify、Webflow、Next.js或手写HTML。

该生成器涵盖完整的标签集——标题、描述、canonical、robots、所有og:字段、所有twitter:字段、图片alt文本——提供实时Google和社交预览,无需账号,无需费用,无CMS依赖。

适用于任何技术栈的Meta标签生成器

由于输出是纯HTML,可以集成到任何项目中。将代码块粘贴到手写静态网站、WordPress主题头部、Shopify的theme.liquid、Webflow自定义代码部分或React/Vue布局组件中。在Next.js中,将值添加到layout.tsx中的Metadata导出。在Astro中,将其作为props传递给Layout.astro的head组件。

收藏此工具,每次启动新页面、更新标题或希望链接在分享时效果最佳时使用。填写表单,复制<head>代码块,粘贴进去,您的页面就为搜索引擎和所有主要社交平台做好了准备。

Frequently asked questions

什么是Meta标签?

Meta标签是放置在页面head中的HTML片段,它们向浏览器和搜索引擎描述页面内容,但不会在页面上显示。最重要的是title标签和meta描述,它们决定了您在Google中的搜索摘要。此外还需要viewport标签控制移动端缩放、charset声明、robots标签控制索引、canonical URL防止重复内容问题,以及Open Graph和Twitter Card标签用于富媒体社交预览。

如何为SEO创建Meta标签?

在表单中输入页面标题、描述、URL和1200×630的预览图片,该生成器会写出完整的标签集:title、meta description、canonical、robots、Open Graph和Twitter Card。将标题控制在60个字符左右,描述控制在155个字符左右,每个页面使用唯一的组合,然后将代码块复制到HTML的head中。

2026年哪些Meta标签对SEO重要?

仍然有价值的标签包括:title标签、meta描述、viewport标签、charset声明、robots标签和canonical链接。此外,Open Graph和Twitter Card标签控制链接在社交平台上的分享效果。旧的keywords meta标签自2009年起就被Google忽略,不再影响排名。

标题和描述的理想长度是多少?

标题目标50–60个字符,meta描述目标145–155个字符。Google会在约600像素宽处截断标题,在约155–160个字符处截断描述,并添加省略号。这里的字符计数器会在超过推荐长度时变成琥珀色。

什么是Open Graph标签?

Open Graph标签——名称以'og:'开头——是Facebook创建的标准,控制链接在社交媒体和聊天应用中分享时的显示效果。核心集合是og:title、og:description、og:image、og:url和og:type。有了这些标签,分享的链接会显示带有您选择的标题、描述和预览图的富媒体卡片,而不是裸露的URL。

在这里输入真实页面信息安全吗?

是的。这个Meta标签生成器完全在您的浏览器中使用JavaScript运行——您输入的标题、描述、URL和图片URL永远不会发送到服务器,永远不会被记录,也永远不会存储在任何地方。页面加载后,该工具可离线工作。

Open Graph图片应该用什么尺寸?

使用1200×630像素、1.91:1比例的图片用于大型社交卡片。这是Facebook、LinkedIn和X在不裁剪的情况下显示的尺寸,同一文件适用于og:image和twitter:image。文件大小保持在5MB以下,使用以https://开头的绝对URL而非相对路径。

Related tools

查看全部工具