Free tools

Meta tag generator: look right on Google and when shared

Fill in a few boxes and get every tag your page needs for Google, Facebook, LinkedIn and X. See the Google preview as you type, then copy and paste.

Google preview

Share card preview

Paste into your <head>

More free tools

How it works

  1. Type your page title, a short description and your page’s link. Add a picture link and your site name if you have them.
  2. Watch the previews. The counters tell you when Google is likely to cut your text off, and the Google preview shows how it will look.
  3. Click Copy and paste the tags into your page’s <head>. Or paste them into Claude Code, Cursor or Codex and ask it to add them to your site.

Questions

What are meta tags?

Short lines of HTML in the <head> of your page. Google uses them for the title and text in search results. Facebook, LinkedIn, X, WhatsApp and Slack use them to draw the preview card when someone shares your link.

How long should my title and description be?

Keep the title under about 60 characters and the description between about 120 and 160. Longer text still works, but Google may cut it off with “…”.

What size should my share image be?

1200 × 630 pixels, as a PNG or JPG under about 5 MB. Use a full link that starts with https://. If you type a path like /og.png, this tool joins it to your page link for you.

Where do I paste the tags in Next.js, Vite or Astro?

In plain HTML, Vite and Astro, put them inside <head> in your page or layout file. Next.js uses a metadata export instead, so the easiest way is to paste the tags into your AI coding agent and ask it to “add these meta tags to my site”.

I changed my tags but the old preview still shows. Why?

Social sites remember previews for a while. Facebook and LinkedIn have free debugger pages that fetch your link again. Google picks up changes the next time it visits your page.

Is anything I type sent anywhere?

No. Everything happens in your browser. Nothing you type leaves your computer.