Home » Dev Tools » Meta Tag Preview

Free tool

Meta-Preview-icon

Meta Tag Preview

See how your page will look as a Google result and as a Facebook, X or LinkedIn card, then copy the tags. Measured by pixel width, which is what actually gets cut.

Use this free meta tag preview to see how a page will look as a Google result and as a share card on Facebook, X and LinkedIn, before anybody else does. Type a title and a description, point it at your social image, and all four appear at once. Already have tags? Paste the head of your page and it reads them back into the fields.

The length meters measure a real pixel width, not a character count, because that is what Google actually cuts on. Fifty wide letters are far past the limit while eighty narrow ones are comfortably inside it, so a character counter tells you to shorten the wrong title. Nothing is uploaded and nothing is fetched. Need the image itself? Make it the right size with the image resizer.

1. What your page says about itself
Only used to draw the domain and breadcrumb in the previews. Nothing is fetched from it.
Google cuts this at roughly 600 pixels on desktop, which is a WIDTH not a character count.
Google mostly builds its snippet from the page itself, and uses this when it describes the page better. Write it anyway: it is what you get when it does.
1200 by 630 is the size Facebook recommends. It is loaded straight from wherever you point it, by your browser.
Shown by some platforms above or beside the title.
2. How it will look
E www.example.com
https://www.example.com › services

Title

Description

Each card is laid out at the real width the platform uses, so the wrapping and the cut-off are your browser measuring the actual text rather than a character count guessing at it. Platforms redesign, so treat this as a close guide.

The tags for your page 

      

        
        
      

    


    

  







				

				

		

				

				

					
		

				

		

				

				

					
How to preview your meta tags
				

				

				

				

									
Five steps, no account and nothing to install.
								

				

				

				

				

									
  1. Put in the page URL. It is only used to draw the domain and the breadcrumb in the previews. Nothing is fetched from it, and nothing about it leaves your browser.
  2. Write the title and description. The meters beside each one show the real width in pixels against what the platform gives you, and turn as you go past it. A width is the thing that gets cut, so that is the thing to watch.
  3. Point it at your social image. 1200 by 630 is the size Facebook recommends and meets the minimum LinkedIn asks for. Your browser loads it straight from wherever you put it, so what you see is what a visitor will get.
  4. Check all four. Google shows the result with the breadcrumb, and there is a desktop and a mobile view because they cut at different points. Facebook, X and LinkedIn each lay the card out their own way, and a title that survives one can be cut by another.
  5. Copy the tags. You get the title, the description, the canonical link, the Open Graph set and the Twitter Card set, ready to paste into the head of your page or into whatever your SEO plugin calls its fields.
								

				

				

				

		
				

				

				

		

				

				

					
		

				

		

				

				

					
More free tools
				

				

				

				

									
Built for our own work, free for yours. No sign-up on any of them.
								

				

				

				

				

					
		

				

		

				

				

																														

				

		

				

				

					
Font Clamp
				

				

				

				

									Fluid clamp() for font size and its matching line height, across a whole type scale.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

															Email Signature Generator icon															

				

		

				

				

					
Email Signature Generator
				

				

				

				

									Make a professional email signature that holds its shape in Gmail, Outlook and Apple Mail. Fill in your details, pick a layout, copy it and paste it in.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
QR Code Generator
				

				

				

				

									Generate styled QR codes with custom colors, dot styles, and logos.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Schema Markup Generator
				

				

				

				

									Build valid JSON-LD for a local business, service, FAQ, article or breadcrumb trail, with every property Google treats as required checked before you paste it.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Color Contrast Checker
				

				

				

				

									Check any two colors against the WCAG contrast rules, get the nearest shade that passes, and convert between HEX, RGB and HSL.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Case Converter
				

				

				

				

									Switch text between sentence case, title case, camelCase, snake_case, and more.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

															UTM Builder icon															

				

		

				

				

					
UTM Builder
				

				

				

				

									Tag your campaign links so analytics can tell where the traffic came from. Build a whole campaign at once and take the set out as a CSV.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Image Resizer
				

				

				

				

									Resize images to any width, height or preset size, crop to fit, and convert the format. Batch, and nothing is uploaded.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
PDF Compressor
				

				

				

				

									Shrink PDF file sizes right in your browser. Batch upload and ZIP download supported.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Merge PDF
				

				

				

				

									Join several PDFs into one file, in the order you choose. Nothing is uploaded and no quality is lost.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Split PDF
				

				

				

				

									Split a PDF into separate files, or pull out only the pages you need. Pick them from thumbnails or type ranges.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Favicon Generator
				

				

				

				

									Generate a complete favicon package, download as ZIP with HTML snippet.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
		

				

		

				

				

																														

				

		

				

				

					
Image Converter
				

				

				

				

									Convert images to WebP, PNG, or JPG. Batch upload and download as a ZIP.								

				

				

				

				

				

									

					
						
									Open Tool
					
					
				

								

				

				

				

		
				

				

				

				

		
				

				

				

		

				

				

					
		

				

		

				

				

					
What people check their meta tags for
				

				

				

				

									
Usually to find out what a page looks like from the outside, before somebody else finds out first.
								

				

				

		

		

				

				

					
Writing the title before the page exists
				

				

				

				

									
The title is usually decided in a document and discovered to be too long after it is live. Checking it takes a few seconds here and saves a round trip with whoever has to change it.
								

				

				

		

				

				

					
Finding out whether a title will be cut
				

				

				

				

									
A character count cannot answer this. A title in wide capitals runs out of room far sooner than one in narrow lowercase, and only measuring the actual width tells you which one you have.
								

				

				

		

				

				

					
Checking a launch before it is shared
				

				

				

				

									
The first thing that happens to a new page is somebody pastes it into a group chat. Seeing that card before the launch is cheaper than seeing it afterwards.
								

				

				

		

				

				

					
Handing tags to a developer
				

				

				

				

									
Copy the block and the whole thing is unambiguous: the title, the description, the canonical, the Open Graph set and the Twitter Card set, written the way they need to appear.
								

				

				

		

				

				

					
Auditing a page you did not build
				

				

				

				

									
Take a view-source of the head, paste it in, and you can see what the page is telling Google and every social platform without installing anything or trusting a third party with the URL.
								

				

				

		

				

				

					
Getting the social image right once
				

				

				

				

									
Every platform crops to roughly the same shape, so one image at 1200 by 630 covers all of them. The previews show whether your text survives the crop.
								

				

				

				

				

				

		
				

				

				

		

				

				

					
		

				

		

				

				

					
Frequently asked questions
				

				

				

				

									
Why it does not fetch your URL, why length is really a width, and what to do when a share preview will not update.
								

				

				

				

				

							

						

				
					
 Why can I not just paste my URL and have it read the tags? 

							
			
			
		

						
				

				

				

									
Because a browser cannot read another site’s HTML without that site’s permission, and the only way around it is a server that fetches the page on your behalf. That would mean every URL you tested was sent to us and logged somewhere, which is the opposite of what the rest of these tools do. Pasting the head of your page gets you the same result with nothing leaving the tab, and view-source on your own page is all it takes to get it.
								

				

				

					

						

				
				

				

				

									
It is not a length, it is a width, and that is the single most useful thing to know here. Google gives you roughly 600 pixels on desktop. Fifty capital W characters are about 944 pixels and eighty lowercase i characters are about 355, so the same character count can be nearly three times different in width. Any tool that counts characters will tell you to shorten a title that fits and pass one that will be cut. The meters here measure the real thing, in the font the result is rendered in.
								

				

				

					

						

				
				

				

				

									
Probably not. Google rewrites the description much of the time, usually pulling a sentence from the page that matches what the person searched for, because a fixed description cannot suit every query. It is still worth writing: it is what you get when Google does use yours, and it is what every social platform and messaging app shows, where nothing rewrites anything.
								

				

				

					

						

				
				

				

				

									
The title does get used and is worth taking seriously. The meta description is not a ranking factor and has not been for a long time, which surprises people. What it affects is whether somebody clicks, and a result that is ranked third and gets clicked beats one that is ranked second and does not. Write it for the person reading the results page, not for the algorithm.
								

				

				

					

						

				
				

				

				

									
1200 by 630 pixels. Every major platform crops to roughly that shape, so one image covers Facebook, X and LinkedIn without separate versions. Keep any text well inside the middle, because the crop is not identical everywhere, and use an absolute https:// URL: a relative path is commonly ignored and you get no card at all.
								

				

				

					

						

				
				

				

				

									
The Open Graph tags are the ones Facebook, LinkedIn and WhatsApp read. X has its own twitter: tags, including twitter:card, which chooses between the large image card and the small one. This generates both sets, and switches twitter:card between summary_large_image and summary depending on whether you have set an image.
								

				

				

					

						

				
				

				

				

									
Every platform caches what it found the first time somebody shared the link, and will keep showing it until told otherwise. Facebook’s Sharing Debugger and LinkedIn’s Post Inspector both re-fetch a URL on demand and are the quickest fix. Elsewhere, sharing the link with a query string on the end can help, because previews are cached by address.
								

				

				

					

						

				
				

				

				

									
No. Everything happens in your own tab, which matters more here than on most tools: an unpublished page title and a landing page that is not live yet are both things you would rather not hand to somebody else’s server. The only thing your browser loads is the social image, straight from the address you give it. The page does send three counters, which are how many previews were drawn, how many tag blocks were copied or downloaded, and one per visit. Those are numbers only.
								

				

				

					

					

						

				

				

				

		
				

				

				

		

				

				

					
		

				

		

		

				

				

					
Want something like this on your own site?
				

				

				

				

									
Free tools are a small part of what we do. The rest is websites and digital products for businesses serious about growth, whether you are launching, scaling or transforming.
								

				

				

		

				

				

									

					
						
									Start Your Project
					
					
				

								

				

				

				

									

					
						
									See Our Services