0
SEO Score
Basic SEO Tags
Page Title Recommended: 50–60 chars
0
Meta Description Recommended: 150–160 chars
0
Canonical URL
Keywords Comma-separated (optional)
Author
Robots
Language / Locale
Theme Color Browser UI color on mobile
Social & SERP Preview
example.com
Page Title Goes Here
Your meta description will appear here in search results. Make it compelling and informative.
Title truncated at ~60 chars · Description at ~160 chars in Google SERP
Generated Meta Tags

About This Meta Tag Generator

What This Tool Generates

This tool generates ready-to-paste HTML meta tag code across four sections. Each section can be previewed in real time and copied independently or all at once with a single click.

  • Basic SEO — title, meta description, keywords, author, robots, language, canonical URL, and theme-color
  • Open Graph — og:type, og:title, og:description, og:image, og:url, og:site_name, og:locale, and article-specific fields (published_time, modified_time, author)
  • Twitter Card — card type, title, description, image, image alt text, twitter:site, and twitter:creator
  • Advanced — charset UTF-8, viewport, X-UA-Compatible, Apple mobile web app, format-detection, Google and Bing site verification, geo.region, copyright, content rating
  • Live previews — Google SERP (title truncates at 60 chars, description at 160 chars), Facebook / Open Graph, Twitter Card (summary_large_image), and LinkedIn
  • SEO score — 8-point weighted check covering title, description, canonical, og:image, OG tags, Twitter tags, robots, and theme color

How to Use This Tool

  • Click Load Sample to instantly populate all fields with a real-world example and explore every feature
  • Fill in Basic SEO first — title and description are the most critical fields; watch the character meter turn green when you hit the optimal range
  • Switch to the Open Graph tab and add your og:image URL — this is the single most impactful social sharing field
  • Go to Twitter Card and select Summary Large Image for maximum visual impact in the Twitter / X feed
  • Use the Advanced tab for site verification codes (Google Search Console, Bing Webmaster Tools) and optional geo / copyright tags
  • Switch the preview tabs (Google, Facebook, Twitter, LinkedIn) to check exactly how your page will look when shared
  • Click Copy All Tags or use the section filter to copy only the tags you need, then paste into your HTML <head>
  • Toggle Dark Mode for a more comfortable editing experience

Meta Tags Reference Guide — SEO, Open Graph & Twitter Card

Basic SEO Tags

The <title> tag is the single most important on-page SEO element — keep it 50–60 characters so it appears in full in Google search results. The meta description does not affect rankings directly but is the primary driver of click-through rate (CTR). Google bolds keywords matching the search query, making compelling descriptions essential. The robots tag controls indexing behavior per page; the canonical tag prevents duplicate content penalties by consolidating ranking signals to one preferred URL.

Open Graph Protocol

Developed by Facebook in 2010, Open Graph turns any URL into a rich social object with a defined image, title, and description. It is now used by Facebook, LinkedIn, Slack, iMessage, WhatsApp, Discord, and many other platforms. The four required OG tags are og:title, og:type, og:image, and og:url. Always use a 1200×630px image at 1.91:1 aspect ratio — wrong sizes cause cropping or blank previews. For articles, add article:published_time and article:author to enable rich display in news aggregators.

Twitter Cards

summary_large_image is the most impactful card type — it shows a full-width image above your title and description, significantly outperforming the smaller summary card in engagement. Twitter falls back to Open Graph tags when Twitter-specific tags are absent, so for most sites you only need to add twitter:card, twitter:site, and twitter:creator on top of your OG tags. The minimum Twitter image size is 300×157px; the card only renders if the image is publicly accessible (no login required).

Common Mistakes

  • Title over 60 chars — Google truncates with "…", hiding your keyword
  • Missing og:image — results in blank or default social share cards
  • Wrong image ratio — Facebook crops 1:1 images, Twitter adds black bars to non-2:1 images
  • Duplicate title and description tags across all pages — confuses Google and reduces CTR
  • Keyword stuffing in description — Google may substitute its own snippet
  • Missing canonical tag — can split ranking signals between HTTP/HTTPS or www/non-www versions
  • og:image URL not absolute — relative URLs fail in social scrapers

Meta Tag Generator FAQ

Meta tags are HTML elements placed in the <head> section of a webpage that provide metadata to browsers, search engines, and social platforms. The most critical for SEO are the title tag (the blue clickable headline in Google results, recommended 50–60 characters), meta description (the snippet text below, recommended 150–160 characters), robots tag (controls crawling and indexing behavior), and canonical tag (prevents duplicate content issues). Meta tags do not change the visible content of a page but significantly influence how it ranks, appears in search results, and renders when shared on social media.

The Open Graph protocol was developed by Facebook to enable any web page to become a rich social object. When a URL is shared on Facebook, LinkedIn, Slack, iMessage, or other OG-supporting platforms, they read the OG meta tags to determine the preview image, title, and description. The four required Open Graph tags are og:title, og:type (e.g. "website" or "article"), og:image, and og:url. Recommended additions include og:description, og:site_name, and og:locale. The recommended og:image size is 1200×630 pixels at a 1.91:1 aspect ratio for optimal display across all platforms.

Twitter Cards control how a URL appears when shared on X (formerly Twitter). The four types are: summary (small image + text), summary_large_image (full-width image — recommended for most sites), app (mobile app promotion), and player (embeds audio/video). summary_large_image is the most impactful because the full-width image dominates the feed and drives significantly higher engagement. Twitter falls back to Open Graph tags if Twitter-specific tags are absent, so you only need to add twitter:card, twitter:site, and twitter:creator on top of your OG tags.

A canonical tag (<link rel="canonical">) tells search engines which URL is the official version of a page when the same content is accessible at multiple URLs. Common scenarios requiring canonical tags include pages accessible via both HTTP and HTTPS, with and without trailing slashes, with UTM tracking parameters, paginated content, or products listed under multiple category paths. Without canonical tags, search engines may split ranking signals between duplicate URLs or index the wrong version. As a best practice, every page should have a self-referencing canonical tag pointing to its own preferred URL.

The robots meta tag controls indexing and link crawling. index, follow is the default and does not need to be explicitly declared. noindex, follow prevents the page appearing in search results while still allowing link equity to flow through outgoing links — useful for admin pages, staging environments, or thin content pages. noindex, nofollow blocks both indexing and link crawling — use for login pages or private content. noarchive prevents Google from storing a cached copy. For most public pages, simply omitting the robots tag achieves the same result as index, follow.

The theme-color meta tag sets the color of the browser's UI chrome (address bar, status bar, tab strip) on mobile devices — primarily Chrome on Android and Progressive Web Apps (PWAs). When a user visits your site on a supported mobile browser, the toolbar changes to the specified hex color, creating a more immersive, branded experience. It is also used when a page is installed as a PWA or pinned to a home screen. Provide a valid 6-digit hex color like #4A2B5E. This tag has no effect on desktop browsers that do not support it and is safe to include universally.

Both Google Search Console and Bing Webmaster Tools offer HTML meta tag verification to prove site ownership. For Google, add <meta name="google-site-verification" content="YOUR_CODE"> to your page's <head>, then click Verify in Search Console. For Bing, add <meta name="msvalidate.01" content="YOUR_CODE"> and verify in Bing Webmaster Tools. Both tags must remain on the page to maintain verification. Alternative methods include uploading an HTML file, adding a DNS TXT record, or using Google Tag Manager. This generator's Advanced tab lets you paste both verification codes and outputs the correct meta tags automatically.