Meta tag generator

Write your title and description, watch how they render in Google, Facebook and Twitter, then copy complete Open Graph and Twitter Card markup.

Meta Tag & Social Share Previewer

Type in your webpage details to see how they appear when shared on Google, Facebook, and Twitter. Grab the optimised HTML tags.

0 / 60 chars
0 / 160 chars

Live Preview Cards

https://frontendhelpers.com
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema metadata, and convert fonts between PX and REM.
Card Preview
FRONTENDHELPERS.COM
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema ...
Card Preview
frontendhelpers.com
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema metadata, and convert fonts between PX and REM.
Optimised Meta Tags

How to use this tool

Meta tags don't appear on your page — they describe it to machines. The <title> and meta description shape your entry in search results; Open Graph tags control what Facebook, LinkedIn, Slack and WhatsApp display when someone shares your link; Twitter Card tags do the same for X.

The distinction that trips people up: meta tags don't directly improve your ranking. Google has said for years that the meta description is not a ranking factor. What it does affect is click-through rate — and a link that gets clicked more often, from a result that satisfies the searcher, absolutely does influence how you perform over time. Meta tags are a conversion problem dressed as an SEO problem.

Writing titles and descriptions that get clicked

Keep titles at roughly 50–60 characters. Google measures the rendered width in pixels rather than counting characters, so the limit is approximate, but 60 is a safe working ceiling. Lead with the distinctive words — if it truncates, you want the important part already read. Putting your brand name at the end, after a dash or pipe, is the conventional pattern for exactly this reason.

Descriptions have room for about 150–160 characters. Treat it as ad copy, not a summary: say what the visitor gets and why it's worth their click. Google frequently rewrites descriptions to match the specific query anyway, so a well-written one is a strong suggestion rather than a guarantee.

Open Graph: the tags that make links look good

Without Open Graph tags, a shared link is a bare URL with whatever text the platform can scrape. With them, it becomes a card with an image, headline and description — dramatically more clickable in a crowded feed.

The five that matter are og:title, og:description, og:image, og:url and og:type. The image does most of the work: use 1200 × 630 pixels (a 1.91:1 ratio) and keep essential text away from the edges, since platforms crop differently. Always use an absolute URL — relative paths silently fail, which is the single most common reason a share card shows no image.

Add og:site_name too. It's a small touch that puts your brand name on the card, and it costs one line.

Why your share preview looks wrong (and how to fix it)

Social platforms cache aggressively. If you share a link, then fix your tags, the old card will keep appearing — sometimes for weeks. The fix is to force a re-scrape: Facebook's Sharing Debugger and LinkedIn's Post Inspector both re-fetch on demand, and X refreshes its cache when you run a URL through its card validator.

The other frequent culprit is JavaScript. Meta tags injected client-side are often missed entirely, because most scrapers read the raw HTML without executing scripts. Meta tags belong in the server-rendered <head>, always.

Developer Implementation Guide: Meta Tags in Next.js & React

While the generator above provides static HTML, modern web applications often need dynamic meta tags based on the current route or database content. Here is how to implement the generated tags in a Next.js (App Router) environment using the built-in Metadata API.

Next.js (App Router) Implementation

In Next.js 13+, you no longer use the <Head> component for standard SEO tags. Instead, export a metadata object or generateMetadata function from your page.tsx or layout.tsx.


// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  // Fetch data based on the route
  const post = await getPostBySlug(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: https://frontendhelpers.com/blog/ + post.slug,
      siteName: 'FrontendHelpers',
      images: [
        {
          url: post.ogImageUrl,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImageUrl],
    },
  }
}
        

By using generateMetadata, Next.js will automatically render the exact HTML tags output by our generator, ensuring crawlers and social scrapers receive fully hydrated meta information on the initial server response.

Frequently asked questions

How long should a meta description be?

Around 150–160 characters. Google truncates longer descriptions in search results, and frequently rewrites them to match the specific query, so treat yours as a strong suggestion rather than a guarantee.

What size should an Open Graph image be?

Use 1200 × 630 pixels, a 1.91:1 ratio. Keep important text away from the edges because platforms crop differently, and always reference the image with an absolute URL — relative paths are the most common reason a share card shows no image.

Do meta tags improve my Google ranking?

The title tag carries some ranking weight; the meta description does not. Their real value is click-through rate — a compelling title and description win more clicks from the same position, which improves performance over time.

Why is my share preview showing the old image?

Social platforms cache link previews aggressively. Force a refresh with Facebook’s Sharing Debugger, LinkedIn’s Post Inspector or X’s card validator. Also check the tags are in the server-rendered HTML — scrapers usually do not run JavaScript.