What are HTML meta tags?

HTML meta tags are elements in the section of a page that provide metadata about the page. They are not displayed on the page but are read by search engines, social media platforms, and browsers.

Open Graph (OG) is a protocol developed by Facebook that enables web pages to become rich objects when shared on social media. OG tags control how your page appears when shared on Facebook, LinkedIn, and other platforms.

What are Twitter Cards?

Twitter Cards allow you to attach rich media experiences to tweets. There are four types: Summary, Summary with Large Image, App, and Player. The 'summary_large_image' type is most popular for blog posts and articles.

What is a canonical URL?

A canonical URL specifies the preferred version of a page when multiple URLs point to the same content. Using prevents duplicate content issues and tells search engines which URL to index.

How long should my meta title and description be?

Keep the meta title under 60 characters so it displays fully in search results. The meta description should be 120-155 characters — long enough to describe the page but short enough to avoid truncation.

Meta Tags Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards.

Title

18/60

Author

Description

50/155

Keywords

Robots

Canonical URL

OG Image URL

Twitter Card Type

Social Preview

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

Generated HTML

<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

About this tool

Meta tags are invisible instructions you add to your website's HTML that tell search engines, social media platforms, and browsers what your page is about. They control how your site appears in Google search results and when someone shares your link on Facebook, Twitter, or LinkedIn. Without proper meta tags, search engines may misinterpret your content, and your links will look plain when shared on social media.

This Meta Tags Generator lets you quickly create all the important meta tags your website needs—title, description, keywords, author, robots directives, and canonical URLs. It also generates Open Graph tags for social media preview control and Twitter Cards for tweet enhancement. Simply fill in your page information, copy the generated HTML code, and paste it into your page's <head> section. The live preview shows exactly how your page will appear when shared on social platforms.

Web developers, content creators, and SEO specialists use this tool to streamline their workflow and avoid syntax errors. Whether you're launching a new blog, optimizing an e-commerce product page, or ensuring duplicate content doesn't hurt your rankings, this generator saves time and ensures consistency across your site.

Frequently Asked Questions

Code Implementation

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.