跳到内容
🛠️ToolsShed

元标签生成器

生成用于SEO、Open Graph和Twitter Card的HTML元标签。

18/60

50/155

社交预览

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

生成的 HTML
<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

关于此工具

元标签是你添加到网站HTML中的隐形指令，用来告诉搜索引擎、社交媒体平台和浏览器你的页面是什么内容。它们控制你的网站在Google搜索结果中的显示方式，以及当有人在Facebook、Twitter或LinkedIn上分享你的链接时的样子。没有适当的元标签，搜索引擎可能会误解你的内容，你的链接在社交媒体上分享时看起来会很普通。

这个元标签生成器让你快速创建网站需要的所有重要元标签——标题、描述、关键词、作者、机器人指令和规范URL。它还会生成用于控制社交媒体预览的Open Graph标签和用于推文增强的Twitter Cards。只需填入你的页面信息，复制生成的HTML代码，然后将其粘贴到你页面的<head>部分。实时预览显示你的页面在社交平台上分享时将如何精确显示。

网络开发者、内容创建者和SEO专家使用此工具来简化工作流程并避免语法错误。无论你是推出新博客、优化电商产品页面，还是确保重复内容不会影响你的排名，这个生成器都能节省时间并确保整个网站的一致性。

常见问题

代码实现

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.