Skip to main content
Bethemesh
Web & SEO

Meta tags generator

Generate a complete local block of title, description, canonical, robots, Open Graph and Twitter/X tags ready to add to your page.

  • Clipboard

Embed this widget

Customize the result, check the live preview, then copy the code.

Preview

Embed code type

Code to copy

Responsive and automatically resized by Bethemesh.

Page title

Title length

0

Description length

0

Generated code

Was this tool useful?

How does this tool work?

This generator produces a page’s <head> tag block in one go: title, meta description, robots, canonical, then the Open Graph tags read by Facebook, LinkedIn or WhatsApp and the Twitter/X Card tags. It escapes special characters and shows the title and description length, giving you clean code to paste into a template.

The title and description are required: they feed the <title> tag, the meta description, og:title, og:description, twitter:title and twitter:description.

The characters &, ", < and > are converted into HTML entities, so a title containing quotation marks does not break the content attribute.

Empty optional fields generate no tag. The canonical URL is also used as og:url; the social image URL feeds og:image and twitter:image; og:type is always website.

The code is organised in three blocks separated by a blank line: base tags, Open Graph, then Twitter/X.

How to use this tool

  1. Enter the title and description

    The Title length and Description length counters update.

  2. Add the canonical URL and social image

    Use absolute URLs; the ideal image is 1,200 × 630 px.

  3. Set the options

    Robots directives, Twitter/X card, site account, Open Graph locale and theme colour.

  4. Generate and copy

    Click Generate tags and paste the generated code into the <head>.

Use cases

Create tags for a new page

Get a complete head without forgetting og:image or the canonical.

Improve social sharing

Control the title, summary and image shown when a link is shared on LinkedIn, Facebook or X.

Complete a static site

Add metadata to a hand-written HTML page or a template with no SEO plugin.

Examples

Product page ready for sharing

One title and one description feed all three tag families; the canonical URL is reused as og:url and the image as og:image and twitter:image.

Input

Page title: Insulated 750 ml steel bottle | Trek
Description: Double-wall bottle: cold for 24 hours, hot for 12. BPA-free, free delivery from €30.
Canonical URL: https://example.com/bottles/steel-750
Robots directives: index, follow
Site name: Trek
Social image URL: https://example.com/img/steel-bottle.jpg
Twitter/X card: summary_large_image
Site Twitter/X account: @trek
Open Graph locale: en_GB

Result

Title length: 36 · Description length: 84
<title>Insulated 750 ml steel bottle | Trek</title>
<meta name="description" content="Double-wall bottle: cold for 24 hours, hot for 12. BPA-free, free delivery from €30.">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#4f46e5">
<link rel="canonical" href="https://example.com/bottles/steel-750">

<meta property="og:title" content="Insulated 750 ml steel bottle | Trek">
<meta property="og:description" content="Double-wall bottle: cold for 24 hours, hot for 12. BPA-free, free delivery from €30.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/bottles/steel-750">
<meta property="og:site_name" content="Trek">
<meta property="og:locale" content="en_GB">
<meta property="og:image" content="https://example.com/img/steel-bottle.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Insulated 750 ml steel bottle | Trek">
<meta name="twitter:description" content="Double-wall bottle: cold for 24 hours, hot for 12. BPA-free, free delivery from €30.">
<meta name="twitter:site" content="@trek">
<meta name="twitter:image" content="https://example.com/img/steel-bottle.jpg">

Tips and best practices

  • For og:image, use an image of at least 1,200 × 630 px and an absolute https URL; social networks do not read relative URLs.
  • The summary_large_image card shows a large image under the link; summary shows a square thumbnail next to the text.
  • The Open Graph locale uses an underscore (en_GB), unlike the HTML lang attribute (en-GB).
  • Some mobile browsers use the theme colour to tint the address bar.

Sources and references

Frequently asked questions

Do Open Graph tags matter for SEO?

Not directly for rankings. They control the preview of a link shared on social networks and messaging apps, which affects clicks and therefore the page’s visibility.

Do I still need twitter: tags if og: tags are present?

X falls back on Open Graph tags, but twitter:card is needed to choose the card format. The tool therefore generates both families.

Why is og:type always website?

It is the right value for most pages. For a blog post, you can replace website with article in the generated code.

Where do I paste the generated code?

In the page’s <head> section, before the closing </head>. In a CMS, use the header code field or the template’s SEO settings.

Is my data sent to a server?

No. The tags are generated in your browser.

Related tools

Keep going with these tools

Tools similar or complementary to this one.

Similar tools

SERP Snippet Simulator

Preview a search result from a title and meta description.

Web & SEOFeaturedUse this tool

HTML SEO Analyzer

Analyze key SEO signals in HTML locally.

Web & SEOFeaturedUse this tool

Read next