Technical SEO
Open Graph Tag Generator
Fill in the title, description, and image and copy the Open Graph and Twitter meta tags. The write side of the Meta Tag Preview.
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />Paste these into the head of your page, then preview the result with the Meta Tag Preview.
Which tag each surface reads
Open Graph began at Facebook and became the default everywhere else. LinkedIn, Slack, WhatsApp, iMessage, and Discord read og:title, og:description and og:image, and so do most other link preview services. X reads the twitter tags when they exist and falls back to Open Graph when they do not, which is why a page with good OG tags and no twitter tags still previews correctly.
The image is where most previews fail. It has to be an absolute URL, 1200 by 630 pixels for the large card, and small enough to fetch quickly. Any text on it should survive being rendered 400 pixels wide in a chat window, which rules out anything you would put on a slide.
The tags themselves are the easy part. The part that costs an afternoon is caching: every platform stores a preview the first time your link is shared and does not re-fetch because you edited a tag. Use each platform's own debugger to force a re-scrape, or publish the image at a new file name so the URL changes.
The block to paste, and the framework equivalent
The generator writes the first block. The second does the same job through the Next.js metadata export, which is where most React sites should set it so the tags render on the server.
<meta property="og:type" content="website" />
<meta property="og:title" content="Acme Invoicing" />
<meta property="og:description" content="Send invoices and chase the late ones in one place." />
<meta property="og:url" content="https://acme.com/invoicing" />
<meta property="og:image" content="https://acme.com/og/invoicing.png" />
<meta property="og:site_name" content="Acme" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Acme Invoicing" />
<meta name="twitter:description" content="Send invoices and chase the late ones in one place." />
<meta name="twitter:image" content="https://acme.com/og/invoicing.png" />
export const metadata = {
title: "Acme Invoicing",
description: "Send invoices and chase the late ones in one place.",
openGraph: {
type: "website",
title: "Acme Invoicing",
description: "Send invoices and chase the late ones in one place.",
url: "https://acme.com/invoicing",
siteName: "Acme",
images: ["https://acme.com/og/invoicing.png"],
},
twitter: {
card: "summary_large_image",
images: ["https://acme.com/og/invoicing.png"],
},
};
Set og:url to the canonical URL of the page. When a link is shared with tracking parameters attached, that tag is what tells the platform which page it is looking at, and it keeps the share counted against one URL rather than a dozen.
Open Graph questions
Do Open Graph tags affect search rankings?
Not directly, and no engine treats them as a ranking signal. What they change is the click-through on every link anyone shares, which is where a good share of early traffic to a new page comes from. Some tools also fall back to og:description when a meta description is missing, so a page with neither has no summary anywhere.
What size should the image be?
1200 by 630 pixels, an aspect ratio of about 1.91 to 1, saved as PNG or JPEG. Keep important content away from the edges, since different platforms crop differently. Avoid SVG entirely and be careful with WebP, as support across preview scrapers is still uneven.
The preview shows the wrong image after I changed it.
The platform cached it. Run the URL through the platform's sharing debugger to force a refresh, which works for most of them. The reliable fallback is to publish the new image at a different file name and update og:image, since a new URL has nothing cached against it.
Do I need both a title tag and og:title?
They do different jobs. The title tag is the label for search results and browser tabs and usually carries the keyword. og:title is the headline of a shared card, where a shorter, sharper line performs better. Set both, and let them differ where the difference helps.
Previews the Technical Agent
Set one page by hand, or let Rankfastt write and apply strong social tags across every page for you.