Skip to main content

Meta Tag Generator

Generate optimized HTML meta tags for SEO and social media sharing (Open Graph & Twitter Cards).

Page Details

Generated Meta Tags

Google Preview

Page Title
https://example.com/page
Brief description of the page...
edit_note By Meet Dhameliya
update Updated: Jul 28, 2026
schedule 6 min read

Getting meta tags right is one of the highest-leverage SEO and social sharing optimisations you can make — and one of the most frequently done wrong. A missing Open Graph image means your link shares as a blank card on WhatsApp and Facebook. A meta description over 160 characters gets truncated by Google. A Twitter Card without the correct meta:name attribute means your blog post shares without a preview on X. The Utility Spark Meta Tag Generator takes your page's title, description, URL, author, image, and keywords and generates the complete, correctly formatted HTML — covering standard SEO meta tags, Open Graph (og:) tags for Facebook, WhatsApp, and LinkedIn sharing, and Twitter Card (twitter:) tags for X sharing. Copy the generated code block and paste it into your page's <head> section. All generation happens in your browser; none of your page details, URLs, or content is transmitted to any server.

lightbulb When to use this tool

  • check_circle Setting up the complete <head> meta tag section for a new website page, product landing page, or blog post.
  • check_circle Ensuring a blog post or article generates a rich preview card with correct title, description, and image when shared on social media.
  • check_circle Generating Open Graph tags for a product page to control how it appears when shared in WhatsApp groups or LinkedIn posts.
  • check_circle Adding Twitter Card meta tags to ensure your article appears with a large image card rather than a plain link on X (Twitter).
  • check_circle Auditing and regenerating meta tags for existing pages where the current tags are missing or incorrectly formatted.

Why use our tool?

Three Tag Sets in One Generator — SEO + Open Graph + Twitter Card

Most meta tag generators focus on basic SEO tags (title, description, keywords, robots). This tool generates all three sets simultaneously: standard SEO tags, Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) for Facebook/WhatsApp/LinkedIn, and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) for X sharing. Copy one code block and you are fully covered.

Character Count Warnings for Critical Fields

Meta titles above 60 characters are truncated by Google in search results. Meta descriptions above 160 characters are truncated. The tool displays a live character count for both fields with a clear warning when you exceed optimal length, so you can trim before generating the final tags.

Open Graph Image Preview

Enter your og:image URL and the tool attempts to load and preview it so you can verify the image appears correctly, is accessible, and has appropriate dimensions (the recommended minimum is 1200×630px for optimal display across all platforms). This prevents the common mistake of a broken image URL that makes all social shares appear without a card image.

Robots Tag Builder with Common Combinations

The robots meta tag controls search engine crawling and indexing behaviour. The tool provides a UI for selecting the correct combination: index/noindex, follow/nofollow, with explanations of when each is appropriate, rather than requiring you to remember the exact attribute values.

Clean, Copy-Ready HTML Output

The generated meta tags are formatted as clean, indented HTML ready to paste directly into a <head> section. There are no extra attributes, no framework-specific syntax, and no proprietary code. The output works in any HTML environment — static HTML, WordPress, React, Next.js, Astro, or any other web framework.

How it works

1

Enter your page title (target: 50–60 characters including the primary keyword near the front).

2

Enter your meta description (target: 140–155 characters — compelling summary of the page's value).

3

Enter the canonical page URL.

4

Enter the OG image URL (must be an absolute URL; recommended minimum 1200×630px).

5

Set Open Graph type (website for homepages/landing pages, article for blog posts), author, and site name.

6

Click 'Generate Tags' to produce the HTML code block.

7

Copy the full code block and paste it inside your HTML page's <head> section, replacing any existing meta tags for the same properties.

Examples

science Blog Post Meta Tags

Title: "10 Free SEO Tools Every Marketer Should Know" (52 chars ✓)
Description: "Discover the best free SEO tools for keyword research, technical audits, and backlink analysis. Updated for 2025." (115 chars ✓)
og:type: article | twitter:card: summary_large_image
Output: Complete 12-line HTML meta tag block covering all three tag sets

science Product Landing Page

Title: "Utility Spark — 81 Free Browser Tools, No Signup" (46 chars ✓)
og:image: https://utilityspark.app/og-image.jpg (1200×630px verified)
Robots: index, follow
Result: Page indexed by Google, shares with large image card on Facebook, WhatsApp, and X

Frequently Asked Questions

Do Open Graph tags replace regular SEO meta tags? expand_more
No — they serve different purposes and you need both. Regular SEO meta tags (title, description, robots) control how search engines read and display your page in search results. Open Graph tags (og:title, og:description, og:image) control how your page appears when shared as a link on social platforms like Facebook, LinkedIn, and WhatsApp — which have their own scrapers that read og: tags specifically. Twitter Card tags serve the same function for X. All three sets should be present and correctly filled on every page.
Do I need Twitter Card tags if I already have Open Graph tags? expand_more
Yes, if you want correct display on X (Twitter). While X does fall back to Open Graph tags when Twitter Card tags are absent, the fallback is not always consistent across all X clients and card types. Explicitly setting Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) ensures your content displays correctly as a summary_large_image card rather than a basic link on all X platforms. This generates rich previews that significantly increase click-through rates on shared links.
What is the correct og:image size for social media sharing? expand_more
The universally recommended og:image dimensions are 1200×630 pixels (1.91:1 ratio). This size displays well on Facebook, LinkedIn, WhatsApp, X, and Slack without cropping. Minimum acceptable size is 600×315px, but smaller images may be cropped or displayed poorly on some platforms. The image file size should be under 8MB. Always use an absolute URL (https://...) not a relative path — social platform scrapers cannot resolve relative URLs.
What are canonical tags and should I include them? expand_more
A canonical tag (rel='canonical') tells search engines which URL is the 'master' version of a page when duplicate or near-duplicate content exists at multiple URLs (e.g., product pages accessible via multiple category paths, or the same content served at both www and non-www versions of a domain). The canonical tag helps consolidate ranking signals and prevent duplicate content issues. It should be set to the preferred URL for every page — even pages without obvious duplicates benefit from a self-referential canonical tag as a best practice.
What robots meta tag values should I use? expand_more
For pages you want indexed and followed: content='index, follow' (or omit the tag entirely — this is the default). For pages you want to keep out of Google's index (login pages, internal admin tools, thank-you pages, duplicate filter combinations in e-commerce): content='noindex, nofollow'. For pages whose links you want followed but content not indexed (category pages with thin content): content='noindex, follow'. For pages whose content you want indexed but links not followed (paid links, sponsored content): content='index, nofollow'.
How do I test whether my meta tags and Open Graph tags are working correctly? expand_more
Use the official platform debugging tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug) shows how Facebook reads your og: tags and renders the preview card. X Card Validator (cards-dev.twitter.com/validator) tests Twitter Card tags. LinkedIn Post Inspector (linkedin.com/post-inspector) validates LinkedIn sharing. Google Rich Results Test (search.google.com/test/rich-results) tests structured data. After updating meta tags, use these tools to re-scrape your URL and confirm the new tags are being read correctly — platforms cache sharing data and may show outdated information until you force a re-scrape.

More SEO & Webmaster Tools

gradient

CSS Gradient Generator

Create beautiful CSS linear and radial gradients with an interactive color stop editor.

Open Tool arrow_forward
data_object

JSON Formatter & Validator

Beautify, validate, and minify JSON data with exact syntax error detection and tree-view visualization.

Open Tool arrow_forward
qr_code

QR Code Generator

Instantly generate custom, scannable QR codes for URLs, text, Wi-Fi, and contact information.

Open Tool arrow_forward
barcode

Barcode Generator

Instantly generate standard scannable 1D barcodes (like CODE128, EAN, UPC) for your retail products and inventory management.

Open Tool arrow_forward