Refract

Meta tag and social preview generator

Write your page title, description and share image, see how they'll appear on Google, X, Facebook and LinkedIn, and copy a complete set of meta, Open Graph and X tags.

Free · no sign-up · copy and paste

Your page

More options
Import tags from existing HTML

Google search result

X (Twitter)

No image: X shows a small text card

From

Facebook

No image

LinkedIn

No image

Previews are close approximations. Each platform changes its layout from time to time and may cache old previews for a while.

Paste inside <head>










How to use the meta tag & social preview generator


  1. Write your title and description. As you type, Refract measures the title in pixels, the way Google does, and tells you when it's likely to be cut off.
  2. Add the page URL and share image. Paste the full URL of the page and of the image you want shown when it's shared. Refract checks the image size and shape.
  3. Check the previews. See approximately how the page will look as a Google result and as a shared link on X, Facebook and LinkedIn.
  4. Copy the tags. Copy the generated tags and paste them into the head of your page, or into the custom head section of your CMS or SEO plugin.


Title and description lengths
Google cuts titles off by width rather than character count, at roughly 600 pixels on desktop, which is usually 50 to 60 characters. Descriptions are trimmed at around 150 to 160 characters. Google sometimes writes its own snippet instead of using your description, but a clear, specific description is still the version it uses most often.
Open Graph and X cards
When a link is shared, Facebook, LinkedIn, Slack, WhatsApp and most other apps read Open Graph tags (og:title, og:description, og:image). X reads its own twitter:card tags and falls back to Open Graph for anything missing. Including both sets, as this generator does, gives you consistent previews everywhere.
The right share image
Use an image of at least 1200 × 630 pixels, roughly a 1.91:1 ratio, and keep important text away from the edges, because platforms crop slightly differently. The image needs a full https:// URL that anyone can open; a local file or a link behind a login won't appear in previews.


Frequently asked questions


Why does my old preview still show after I changed the tags?
Social platforms cache link previews. Facebook's Sharing Debugger and LinkedIn's Post Inspector let you refresh them; X refreshes its cache on its own over time.
Do meta keywords help SEO?
No. Google has ignored the meta keywords tag for many years, so this generator doesn't include it.
Can it read the tags from my existing page?
Yes. Paste your page's HTML into 'Import tags from existing HTML' and the generator fills in the current values so you can check and improve them.
I use WordPress. Where do these tags go?
If you use an SEO plugin such as Rank Math or Yoast, enter the title, description and image in the plugin's fields instead of pasting tags, so you don't end up with duplicates.