Meta Tag Generator

Write your page title, description and image, check the length of each, preview the result on Google and social, then copy the HTML meta tags.

Live preview3/4 ready

Framerhttps://www.framer.com/

Framer: Free website builder and AI design agentThe free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in.

Title is short

Description length

Canonical URL

Social image

Your meta tags24 lines · paste inside <head>

1<!-- Primary Meta Tags -->
2<title>Framer: Free website builder and AI design agent</title>
3<meta name="title" content="Framer: Free website builder and AI design agent" />
4<meta name="description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />
5<link rel="canonical" href="https://www.framer.com/" />
6 
7<!-- Favicon -->
8<link rel="icon" href="https://framerusercontent.com/images/Io89FonxEaWg4nxvQQllVLwPUUI.png" />
9<link rel="apple-touch-icon" href="https://framerusercontent.com/images/Io89FonxEaWg4nxvQQllVLwPUUI.png" />
10 
11<!-- Open Graph / Facebook / LinkedIn -->
12<meta property="og:type" content="website" />
13<meta property="og:url" content="https://www.framer.com/" />
14<meta property="og:title" content="Framer: Free website builder and AI design agent" />
15<meta property="og:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />
16<meta property="og:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
17<meta property="og:image:width" content="1200" />
18<meta property="og:image:height" content="630" />
19<meta property="og:site_name" content="Framer" />
20 
21<!-- X (Twitter) -->
22<meta name="twitter:card" content="summary_large_image" />
23<meta name="twitter:url" content="https://www.framer.com/" />
24<meta name="twitter:title" content="Framer: Free website builder and AI design agent" />
25<meta name="twitter:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />
26<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
27<meta name="twitter:site" content="@framer" />

Then run the live URL through the meta tag checker to confirm what Google and social apps read.

How to write good meta tags

Fill in the fields above and the generator writes the HTML for you. Paste it into the head of your page, or copy the values into your CMS or site builder’s SEO settings.

Write a title of 50 to 60 characters

Put the main keyword near the start and the brand name at the end. Google cuts titles off at around 60 characters.

Keep the meta description between 140 and 160 characters

Sum up what the page offers and give people a reason to click. Google sometimes rewrites descriptions, but a clear one that matches the search is shown far more often.

Add a canonical URL and an OG image

The canonical tag tells search engines which address is the main version of the page. Use a 1200 × 630 px og:image so it fills the large card on every platform.

Test the tags after publishing

Once the tags are live, run the URL through the meta tag checker to see what Google and social apps read. Social networks cache previews, so recheck after every change. If an app still shows the old version, refresh the cached preview.

Meta tag generator FAQ

Quick answers about meta tags, Open Graph and where the generated code goes.

What is a meta tag generator?

A meta tag generator turns a page title, description, URL and image into the HTML tags that search engines and social networks read: the title tag, meta description, canonical link, Open Graph tags and Twitter card tags.

Which meta tags does this tool generate?

It writes the title tag, meta title and description, rel=canonical, og:type, og:url, og:title, og:description, og:image with width and height, og:site_name, and the twitter:card, title, description, image and site tags.

Where do I paste the generated meta tags?

Paste them inside the head section of your HTML, just before the closing head tag. In Framer, Webflow, WordPress or Shopify, enter the same title, description and image in the page’s SEO settings instead.

Do meta tags still matter for SEO?

The title tag is still a ranking signal, and the meta description is what most people read in search results before they click. Open Graph and Twitter tags decide how your link looks when it is shared, which affects clicks too.

Is this meta tag generator free?

Yes. It runs in your browser, needs no account, and nothing you type is stored.