NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
BarcodeEmail signatureMeta tagsQR codeRobots & sitemapServer configUTM

Meta Tag Generator & Social Preview

Title, description and social tags for a page, with Google, Facebook, LinkedIn and X previews.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Social sharing

Google result preview

Shared link preview

This loads the image from its own web address; nothing else leaves your browser.

HTML for your page's head

  

  



The previews are mock-ups to judge length and wording. Google and social networks change their layouts, may rewrite titles and descriptions, and cut text by width rather than by a fixed number of characters, so pixel widths here are estimates.



  
How to use it

  
  1. Write the page title and meta description and watch the length bars: green means it should show in full.
  2. Add the canonical address, indexing choice and the social sharing fields, including an image address for the share card.
  3. Check the two previews, then copy the HTML and paste it into the head section of your page.
  4. Open Social preview to see the page as a Google result and as Facebook, LinkedIn and X cards. It uses your fields, or paste the meta tags or head section of any page to check it.





  
Questions

  
How long should a title tag be?
Google cuts titles by width, at roughly 600 pixels on desktop, which is about 50 to 60 characters. Put the words that matter first so nothing important is lost if it is shortened.
How long should a meta description be?
Around 120 to 155 characters shows in full on most results. Google often writes its own snippet from the page text, but a clear description still helps when it is used.
What are Open Graph tags?
Tags such as og:title and og:image that Facebook, LinkedIn, WhatsApp, Slack and many other apps read when someone shares a link. Without them the app guesses, often picking the wrong image.
How does the social preview work?
Paste the head of a page, or just its meta tags, and the tool reads the title, description, Open Graph and X card tags as plain text, then draws a Google result and Facebook, LinkedIn and X cards from them. With nothing pasted, it uses the fields from the Generator tab. The cards are close mock-ups; each network changes its layout from time to time.
Why does a network show the wrong picture or an old title?
Networks keep a copy of a link preview for a while. After changing your tags, ask the network to fetch the page again with its own sharing debugger, then share the link once more.
Do I need separate X (Twitter) tags?
Only twitter:card is needed to choose the layout. X falls back to the Open Graph title, description and image, so this tool adds the card type and your account and lets the og: tags do the rest.





        

    
About this tool

    
About the meta tag generator
The title and meta description are often the first thing people read about a page, in a search result or a shared link. This tool helps you write them, checks their length, and outputs the HTML for the head of your page.
What it covers
  • Title and meta description, with length bars that turn green when the text should show in full.
  • Canonical address and the indexing choice for search engines.
  • Open Graph tags for the title, description and image that Facebook, LinkedIn, WhatsApp, Slack and many other apps show when a link is shared.
  • The X card type; X falls back to the Open Graph tags for everything else.
Two previews show roughly how the page looks as a search result and as a share card.
Social preview
The Social preview tab draws the page as a Google result and as Facebook, LinkedIn and X cards side by side. It uses the fields you filled in, or paste the meta tags or the whole head section of any page to check it. Pasted HTML is read as plain text, never run, and images load only when you ask. A short list flags common gaps, such as a missing og:image or a title likely to be cut off.
Writing guidance
Search engines cut titles by width, about 600 pixels on desktop, which is roughly 50 to 60 characters, so put the words that matter first. Descriptions around 120 to 155 characters usually show in full. Google sometimes writes its own snippet from the page text, but a clear description still helps when it is used. A share image of 1200 by 630 pixels suits most apps.
The previews are mock-ups for judging length and wording; real layouts change and pixel widths are estimates. Everything runs in your browser.
  

        

    
Related tools