DiffCheck

Meta 标签生成器

生成 SEO meta 标签、Open Graph 标签和 Twitter Card 标签，填写表单后一键复制 HTML 代码。

0/60
0/160

逗号分隔。大多数搜索引擎会忽略此标签。

生成的 HTML
<!-- SEO Meta Tags -->
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">

What Are Meta Tags?

Meta tags are HTML elements placed in the <head> section of a web page that provide structured metadata to search engines and social media platforms. They control how a page appears in search engine results (SEO meta tags), how it looks when shared on social networks (Open Graph), and how it renders as a card on X (formerly Twitter). Well-crafted meta tags directly affect click-through rates in search results and the visual quality of social media link previews.

This generator covers three sets of meta tags: SEO (title, description, keywords, canonical URL, robots directives), Open Graph (og: properties for Facebook, LinkedIn, and Slack), and Twitter Cards (twitter: properties for X). Fields that overlap (like title and description) auto-fill from SEO values if the social-specific fields are left blank.

How to Use the Meta Tags Generator

  1. Fill in the SEO tab with your page title (under 60 characters), meta description (140–160 characters), and optional canonical URL.
  2. Switch to the Open Graph tab and add your OG image URL (recommended: 1200×630 px). Title and description fields will inherit SEO values if left blank.
  3. Switch to the Twitter tab, select a card type, and optionally add your Twitter handle and a separate Twitter image.
  4. The generated HTML output on the right updates in real time. Click Copy and paste the tags into the <head> section of your HTML.

Features

  • SEO meta tags: title, description, keywords, canonical URL, robots
  • Open Graph tags: type, title, description, image, URL, site name, locale
  • Twitter Card tags: card type, site/creator handle, title, description, image
  • Character counters with warnings for title (60) and description (160)
  • Social fields auto-inherit SEO values when left blank
  • Real-time HTML preview with copy button
  • Runs entirely in your browser — no data uploaded

FAQ

What are meta tags?

Meta tags are HTML elements in the <head> section that provide metadata about a page to search engines and social platforms. They control the title and description shown in search results, and the image/text preview when a URL is shared on social media.

What is the Open Graph protocol?

Open Graph is a protocol developed by Facebook that lets web pages control their appearance when shared on social media. By adding og: meta tags, you define the title, description, and image shown in social media previews on Facebook, LinkedIn, Slack, and other platforms.

What is a Twitter Card?

Twitter Cards (X Cards) are meta tags that control how your content appears when shared on X. The summary_large_image card type shows a large preview image. If Twitter Card tags are absent, X falls back to Open Graph tags automatically.

What is the ideal meta description length?

Google typically truncates meta descriptions at around 155–160 characters. Aim for 140–160 characters. The character counter in this tool highlights values that exceed the recommended length.