</>
DevToolHub

Meta Tag Generator

Fill in your page details and instantly preview how your site will look on Google, Facebook, and Twitter. Copy the generated HTML meta tags straight into your <head>.

Basic SEO
0/60
0/160
Open Graph / Social
Additional
Live Previews

Google Search Preview

https://example.com/page

Page Title

Meta description will appear here. Write a compelling description under 160 characters to improve click-through rates from search results.

Facebook / Open Graph Preview

No OG image set (recommended: 1200 x 630)

example.com

Page Title

Description will appear here...

Twitter Card Preview (Large Image)

No image set

Page Title

Description will appear here...

example.com

Generated Meta Tags
// fill in the fields above to generate meta tags

How It Works

Enter your page title, description, and social sharing details in the form above. The tool generates standard HTML meta tags, Open Graph tags for Facebook and LinkedIn, and Twitter Card markup — all in real time. Three live previews show exactly how your page will appear in Google search results, Facebook shares, and Twitter posts.

Everything runs in your browser. No data is sent to any server, so it's safe for unreleased projects and confidential pages. Click “Copy HTML” and paste the output directly into your page's <head> section.

Essential Meta Tags for SEO

TagPurposeBest Practice
<title>Primary ranking signal; shown in search results and browser tabs50–60 characters, include primary keyword near the start
meta descriptionShown as the snippet below the title in SERPs120–160 characters, compelling call-to-action, unique per page
link canonicalTells search engines which URL is the “main” versionAlways set to the full, absolute URL of the canonical page
meta robotsControls crawling and indexing behaviorDefaults to index, follow. Use noindex for staging, thin, or duplicate pages
meta authorCredits the page authorOptional; useful for articles and bylined content
meta keywordsLegacy tag, no longer used by Google for rankingGoogle ignores it; Bing may still give minor weight. Low priority.

Open Graph Tags Explained

Open Graph (OG) is a protocol created by Facebook that lets you control how your pages look when shared on social networks. Without OG tags, platforms guess the title, description, and image — often producing ugly or incorrect previews.

The four core OG properties are:

  • og:title— the title shown in the share card. Can differ from your SEO title to be more engaging on social media.
  • og:description— a short summary. Keep it under 110 characters for Facebook so it doesn't get clipped.
  • og:image— the hero image. Use 1200 x 630 px for best results across all platforms.
  • og:type— tells the platform what kind of content this is (website, article, or product).

This tool also generates og:url from your canonical URL, which tells Facebook the preferred link to display.

FAQ

What meta tags does Google use?

Google primarily uses the <title> tag and meta description for search results display. It also reads meta robots and link canonical to understand crawling and indexing preferences. Google has confirmed it does not use meta keywordsas a ranking signal. Open Graph tags don't directly affect Google rankings, but they improve click-through rates from social media, which can indirectly boost traffic.

What size should OG images be?

The recommended size is 1200 x 630 pixels (1.91:1 aspect ratio). This works well on Facebook, Twitter, LinkedIn, and other platforms. For Twitter's summarycard type, the image is displayed smaller at about 125 x 125 pixels. Keep important content centered — different platforms may crop edges.

Do meta keywords matter?

For Google, no. Google's webspam team confirmed in 2009 that they don't use the keywords meta tag for ranking. Bing has said it can be used as a spam signal (stuffing keywords can actually hurt). Most SEOs skip it entirely. If you include it, keep it to 5–10 relevant terms and don't stuff.

How to test my meta tags?

After deploying your page, use these free tools to verify your tags render correctly:

  • Facebook Sharing Debugger(developers.facebook.com/tools/debug) — shows how Facebook reads your OG tags. Also forces Facebook to re-scrape the page.
  • Twitter Card Validator(cards-dev.twitter.com/validator) — previews how your Twitter Card will look.
  • Google Rich Results Test(search.google.com/test/rich-results) — checks structured data and meta tags from Google's perspective.

Related Tools