Meta 标签生成器

填写您的页面标题、描述和图片，检查各自的字数与长度，在 Google 和社交平台上预览展示效果，然后复制 HTML meta 标签。

Live preview2/4 ready

Framerhttps://www.framer.com/

Framer：免费网站构建器与 AI 设计智能体一款配备设计智能体的免费建站工具，助您轻松实现从创意构思到网站上线的全过程。内容支持随时修改，并内置网站托管、CMS、数据分析、SEO 及 AEO 功能。

Title is short

Description is short

Canonical URL

Social image

Your meta tags24 lines · paste inside <head>

1<!-- Primary Meta Tags -->
2<title>Framer：免费网站构建器与 AI 设计智能体</title>
3<meta name="title" content="Framer：免费网站构建器与 AI 设计智能体" />
4<meta name="description" content="一款配备设计智能体的免费建站工具，助您轻松实现从创意构思到网站上线的全过程。内容支持随时修改，并内置网站托管、CMS、数据分析、SEO 及 AEO 功能。" />
5<link rel="canonical" href="https://www.framer.com/" />
6 
7<!-- Favicon -->
8<link rel="icon" href="https://framerusercontent.com/images/Io89FonxEaWg4nxvQQllVLwPUUI.png" />
9<link rel="apple-touch-icon" href="https://framerusercontent.com/images/Io89FonxEaWg4nxvQQllVLwPUUI.png" />
10 
11<!-- Open Graph / Facebook / LinkedIn -->
12<meta property="og:type" content="website" />
13<meta property="og:url" content="https://www.framer.com/" />
14<meta property="og:title" content="Framer：免费网站构建器与 AI 设计智能体" />
15<meta property="og:description" content="一款配备设计智能体的免费建站工具，助您轻松实现从创意构思到网站上线的全过程。内容支持随时修改，并内置网站托管、CMS、数据分析、SEO 及 AEO 功能。" />
16<meta property="og:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
17<meta property="og:image:width" content="1200" />
18<meta property="og:image:height" content="630" />
19<meta property="og:site_name" content="Framer" />
20 
21<!-- X (Twitter) -->
22<meta name="twitter:card" content="summary_large_image" />
23<meta name="twitter:url" content="https://www.framer.com/" />
24<meta name="twitter:title" content="Framer：免费网站构建器与 AI 设计智能体" />
25<meta name="twitter:description" content="一款配备设计智能体的免费建站工具，助您轻松实现从创意构思到网站上线的全过程。内容支持随时修改，并内置网站托管、CMS、数据分析、SEO 及 AEO 功能。" />
26<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
27<meta name="twitter:site" content="@成帧器" />

Then run the live URL through the meta tag checker to confirm what Google and social apps read.

如何编写优质的 Meta 标签

填写上方的字段，生成器就会为您编写 HTML 代码。将其粘贴到页面的 <head> 标签中，或将相应的值复制到您的 CMS 或建站工具的 SEO 设置中。

写一个50到60个字符的标题

将主要关键词放在靠前的位置，品牌名称放在末尾。谷歌通常会在 60 个字符左右截断标题。

将元描述（meta description）保持在 140 到 160 个字符之间

简要概述页面所提供的内容，并给用户一个点击的理由。虽然 Google 有时会重写网页描述，但清晰且与搜索内容高度匹配的描述更有可能被展示。

添加规范网址（canonical URL）和 OG 图片

规范标签（canonical tag）用于告诉搜索引擎哪个网址是该页面的主要版本。建议使用 1200 × 630 像素的 og:image，以便在各个平台上都能完整填充大卡片展示。

发布后测试代码

标签上线后，在元标签检查工具中运行该网址，查看 Google 和社交应用读取的内容。社交网络会缓存预览，因此每次更改后都要重新检查。如果应用仍显示旧版本，请刷新缓存的预览。

Meta 标签生成器常见问题解答

关于 Meta 标签、Open Graph 以及生成的代码放置位置的快速解答。

什么是 Meta 标签生成器？

Meta 标签生成器可将页面标题、描述、URL 和图片转换为搜索引擎与社交网络可读取的 HTML 标签，包括：title 标签、meta description 描述、规范链接（canonical link）、Open Graph 标签以及 Twitter 卡片标签。

该工具会生成哪些 meta 标签？

它会写入 title 标签、meta title 和 description、rel=canonical、og:type、og:url、og:title、og:description、包含宽度和高度的 og:image、og:site_name，以及 twitter:card、title、description、image 和 site 等标签。

我应该把生成的 meta 标签粘贴在哪里？

将它们粘贴到 HTML 的 head 区域内，紧贴着闭合的 head 标签之前。如果使用的是 Framer、Webflow、WordPress 或 Shopify，请改为在页面的 SEO 设置中输入相同的标题、描述和图片。

Meta 标签对 SEO 还重要吗？

标题标签（Title tag）仍然是一个排名信号，而元描述（Meta description）则是大多数人在搜索结果中点击前会阅读的内容。Open Graph 和 Twitter 标签决定了您的链接在被分享时的展示样式，这同样会影响点击率。

这个元标签生成器是免费的吗？

是的。它直接在您的浏览器中运行，无需注册账号，并且您输入的任何内容都不会被保存。