← 返回工具箱
工具
Meta 标签预览 / 生成
一边填标题、描述、链接和图片，一边预览搜索结果、Open Graph 和 Twitter 卡片效果。
可输入域名一键识别并填充下方表单；也可手动填写，预览与代码仅在本地生成，不向第三方发送数据。
输入域名一键识别
网页标题 Title 示例
example.com
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
example.com · 海豹建站
网页标题 Title 示例
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
海豹建站
网页标题 Title 示例
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
example.com
HEAD 片段已剪下 ✓
<meta name="description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="网页标题 Title 示例" />
<meta property="og:description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta property="og:url" content="https://example.com/post/hello-world" />
<meta property="og:image" content="https://flooc.com/og-image.png" />
<meta property="og:site_name" content="海豹建站" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="网页标题 Title 示例" />
<meta name="twitter:description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta name="twitter:image" content="https://flooc.com/og-image.png" />