What are meta tags and why bother writing them?
Meta tags are invisible instructions in the `<head>` section of your page. They tell Google which title to show in search results, Facebook which image to use for the preview, and the browser what language the content is in. Without them Google picks its own title (usually worse than yours), and the Facebook preview shows a link with no image, the domain instead of the title.
Here you fill in a form, flip switches for the sections you need (Basic, OpenGraph, Twitter Card, Article), and on the right you see four previews of exactly what your link will look like in Google results, on Facebook, on X (Twitter) and on LinkedIn. You copy the finished HTML block and paste it between `<head>` and `</head>` on your page.
Title and description for a search engine are the single most cost-effective SEO optimization. A well-written pair lifts CTR by 20-50% with zero changes to the page content.
How to use it
- Start with Basic: type a title (max 60 chars, Google truncates longer) and description (140-160 chars). This appears in Google results.
- Flip OpenGraph on and fill in og:image (URL to a 1200×630 px image). Without it, Facebook, LinkedIn and Slack show a preview without a thumbnail.
- Flip Twitter Card on, pick `summary_large_image` (large card with a big image). Type your handle (@your-company) in the site field.
- If the page is a blog post, enable Article and fill in publish/modify dates and author.
- On the right you see live previews for 4 platforms. Adjust title/description length, check warnings, copy the whole HTML block and paste it into `<head>` on your page.
When this tool helps
Common situations where it pays to generate a full set of meta tags:
- New blog post. Type a title, description, og:image, set publish/modify dates and copy the HTML block to your CMS (WordPress has SEO Yoast / Rank Math fields, Next.js has `generateMetadata`).
- Job listing page. HR shares the link on LinkedIn, the preview has to look professional. Without og:image LinkedIn shows just the domain.
- Product landing page. The ad campaign needs tidy previews on Facebook Ads. Type og:type=product, og:image with a strong photo, og:price (via og:price:amount + og:price:currency).
- Client SEO audit. Check key pages, generate a fresh meta block for each, hand the HTML to developers to deploy.
- Mobile app landing page. Before App Store / Google Play launch, check how the link looks when someone pastes it in iMessage or Slack.
- International site. For each language version generate a separate block with `og:locale=pl_PL` (or `en_US`) so Facebook knows which version to show.
After deploying the code, check how it looks with the OpenGraph preview. If you also generate structured data (JSON-LD), use the JSON-LD schema builder.