Skip to content
DevUtil

Meta Tag Generator - Generate HTML Meta Tags for SEO

Google Preview
https://example.com
Page Title
Page description will appear here.
Facebook Preview
example.com
Page Title
Page description will appear here.
Twitter Preview
Page Title
Page description will appear here.
example.com
HTML Tags
<!-- Primary Meta Tags -->
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#ffffff">

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

<!-- Twitter -->
<meta property="twitter:card" content="summary">

About the Meta Tag Generator

Meta tags control how your pages appear in Google search results and on social media. A missing or truncated title tag means lost clicks. Missing Open Graph tags mean Facebook and LinkedIn show a generic link instead of a rich card with your chosen image and description.

This tool generates a complete set of meta tags from a simple form. Fill in your page title, description, URL, and image, and the live previews show exactly what Google, Facebook, and Twitter will display. Character counters warn you before your title or description gets truncated.

How to Use

Fill in the form fields on the left side. As you type, the previews on the right update in real time. The Google SERP preview shows how your page will look in search results, with title truncation applied at the same point Google would truncate it. The Facebook and Twitter previews show the social card layout. When you are happy with the result, copy the generated HTML from the output section and paste it into your page's <head>.

Tags Generated

  • Primary tags. title, meta description, robots directive, and theme-color.
  • Open Graph tags. og:type, og:url, og:title, og:description, og:image, og:site_name, and og:locale for Facebook, LinkedIn, and other platforms.
  • Twitter Card tags. twitter:card, twitter:url, twitter:title, twitter:description, twitter:image, and twitter:site for Twitter/X previews.

Frequently Asked Questions

What meta tags does this tool generate?
It generates primary HTML meta tags (title, description, robots, theme-color), Open Graph tags for Facebook and LinkedIn (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site).
What is the ideal length for a page title?
Google typically displays the first 50-60 characters of a title tag. Titles under 60 characters are shown in full most of the time. The tool shows a character counter that turns amber above 60 and red above 70.
What is the ideal length for a meta description?
Google typically displays up to 155-160 characters. The tool counts characters and flags descriptions over 160 as a warning and over 180 as too long.
What is Open Graph and why do I need it?
Open Graph is a protocol created by Facebook that controls how your page appears when shared on social media. Without OG tags, platforms guess the title, description, and image. With proper OG tags, you control exactly what is shown.
Where do I put these meta tags?
Paste them inside the section of your HTML document, before the closing tag. Most frameworks and CMS platforms have a dedicated place for custom head tags.