quialo.

Meta Tag and OG Preview Generator

0 characters
0 characters

Generated HTML

Example values are shown until you fill in every field. Edit the inputs above to generate your own tags.

<title>Your page title goes here</title>
<meta name="description" content="Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews." />
<link rel="canonical" href="https://example.com/your-page" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your page title goes here" />
<meta property="og:description" content="Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews." />
<meta property="og:url" content="https://example.com/your-page" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your page title goes here" />
<meta name="twitter:description" content="Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews." />

Live previews

Google search result

example.com › your-page

Your page title goes here

Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews.

Facebook share
Add an OG image URL to fill this space

example.com

Your page title goes here

Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews.

X (Twitter) card
Add an OG image URL to fill this space

Your page title goes here

Your meta description goes here. Aim for 150 to 160 characters that clearly summarize the page so it reads well in search and social previews.

example.com

LinkedIn share
Add an OG image URL to fill this space

Your page title goes here

example.com

Paste your page title, meta description, URL, and OG image link, then watch the tags and the social cards update as you type. You get a ready to paste block of title, description, canonical, Open Graph, and Twitter tags, plus live previews of how the page looks in Google search and when shared on Facebook, X, and LinkedIn. Everything runs in your browser, so nothing you enter is uploaded.

How to use

  1. Enter your page title and meta description. The counters flag anything too short or too long for search and social.
  2. Add the page URL and, if you have one, a link to your hosted OG image (1200 by 630 works best).
  3. Choose whether the page is a website or an article so the og:type value is correct.
  4. Check the live Google, Facebook, X, and LinkedIn previews and adjust your text until each card looks right.
  5. Click Copy HTML and paste the block into the head of your page.

Examples

  • A 55 character title and a 155 character description sit in the ideal range, so the counters stay quiet and the Google preview shows both in full.
  • Adding an OG image URL switches the Twitter card to summary_large_image and fills the Facebook, X, and LinkedIn cards with your image.
  • Leaving the image blank outputs a twitter:card value of summary and shows a gray placeholder where the image would go.

FAQs

How is this different from a plain meta tag generator?
This tool adds live previews. Alongside the title, description, and canonical tags, it builds Open Graph and Twitter tags and shows how your page will look in Google search and when shared on Facebook, X, and LinkedIn.
What size should my OG image be?
Use 1200 by 630 pixels for the large card layout. That ratio fills the preview on Facebook, X, and LinkedIn without cropping. Much smaller images may be shown as a thumbnail or skipped.
Why is og:site_name not in the output?
og:site_name should hold the name of your own site, which this tool cannot know. Leaving it out is safer than guessing. Add it yourself with your site name if you want it included.
How long should my title and description be?
Aim for about 50 to 60 characters for the title and 150 to 160 for the description. The counters warn when either runs short or long, so search engines are less likely to cut them off.
Do my page details get uploaded anywhere?
No. The tool runs entirely in your browser. Your title, description, URL, and image link are never sent to a server, so you can safely preview pages that are not published yet.
Why does my image not show in the preview?
The preview loads the image straight from the URL you paste. If the URL is wrong, private, or blocks other sites from loading it, a gray placeholder appears instead. The generated og:image tag still uses the URL you entered.

Related tools