Open Graph Generator

Open Graph is a small protocol for describing a web page to other software. It was introduced by Facebook in 2010 and has since been adopted almost everywhere — LinkedIn, WhatsApp, Slack, Discord, Signal, Pinterest and X all read it. You add a handful of meta tags to your page's head, and anything that fetches the page can build a preview card from them instead of guessing.

OG tags are the individual meta elements that make up Open Graph, each carrying one property. They look like <meta property="og:title" content="Example Page">. The prefix og: is what marks a tag as Open Graph, and the property attribute — not name — is what makes it valid.

The headline shown on the sharing card. It does not have to match your page's <title>: the page title is written for a search results page and often carries the site name and separators, whereas og:title is written for a card that already shows the domain. Shorter and more direct usually wins.

The body text of the card, usually one or two sentences. It is the only prose most cards display, so it should say what the reader gets rather than repeat the title. Without it, platforms fall back to your meta description or to the first text they find on the page, which is rarely what you would have chosen.

The URL of the picture shown on the card, and by a wide margin the most visible tag here — a link with an image occupies several times the space of one without. It must be an absolute URL beginning with https://, because a crawler has no page context to resolve a relative path against.

The canonical address of the page. It tells a platform which page this is, which is how shares of the same content arriving from different links get counted as one thing. Point it at the clean canonical URL, not at whatever address the current visitor happens to be on with its tracking parameters attached.

What kind of thing the page is. website is the default and the right answer for most pages; article is for posts and news; profile, book, music.song and video.movie describe more specific things. The vertical types define extra properties of their own — an article can carry article:published_time and article:author, for instance — which this generator does not produce.

The name of the site as a whole, not of this page. On a card it appears as a small label alongside the domain, so it is where “Example Blog” goes while og:title carries the headline. It is optional and takes two seconds to add.

1200 × 630 pixels is the conventional choice and works well with the large-card layouts. It is a convention rather than a requirement — Open Graph specifies no dimensions at all. Several platforms treat roughly 200 × 200 as a lower bound and will show anything smaller as a thumbnail or ignore it, and most crop to their own ratio, so keep important text and faces away from the edges.

Not strictly, but they help. Given the dimensions, a platform can lay the card out before it has finished downloading the image, which avoids a first render with a gap where the picture will be. Supply both or neither — one alone tells a layout engine nothing useful.

Not directly. Open Graph tags are not a ranking signal, and Google does not use them to rank pages. What they affect is what happens after someone shares your link: a card with a title, description and image gets clicked far more often than a bare URL. That traffic is real, but it comes from people, not from an algorithm.

Google reads them but does not rank on them. Google Search uses your <title>, meta description and structured data for search results; it may fall back to Open Graph values when the standard tags are missing or unhelpful. Treat Open Graph as being for sharing and structured data as being for search — they are different jobs with some overlap.

Yes, both, and so do WhatsApp, Slack, Discord, Signal, Telegram, Pinterest, Microsoft Teams and X. It is the closest thing the web has to a universal preview format. What differs is how each one lays the card out, how much text it shows and how it crops the image — not whether it reads the tags.

They are two separate specifications that overlap almost completely. The most important practical difference is the attribute: Open Graph uses property="og:title" because it is built on RDFa, while X's tags use name="twitter:title" because they were specified against plain HTML meta elements. Swapping the two is a common bug that appears to work, because some parsers are lenient.

Usually not. X falls back to the og: tags when the twitter: equivalents are missing, so a page with good Open Graph tags already gets a card. Add the twitter: block when you want something different there — a distinct title, a different image, or specifically the summary card rather than the large one — or when you want to credit an account with twitter:site.

Because the platform cached what it scraped, often for several days. The card you see after editing a tag is almost always the old one. Every major platform has a sharing debugger that re-fetches a URL on demand — Facebook's Sharing Debugger, LinkedIn's Post Inspector, X's card validator — and running your URL through the relevant one is the only reliable way to see a change take effect.

Because each platform decides its own layout. They read the same tags but choose their own card width, crop ratio, truncation point and whether to show the site name — and they redesign periodically. Anything that claims to show you exactly how a card will look on a named platform is showing you a snapshot of a moving target.

Yes. og:image is just a URL and it can point at a CDN, an asset host or another domain entirely. Two practical conditions: it must be publicly reachable without a login, since a crawler arrives with no session; and it should be served over https, because a mixed-content image is frequently dropped.

Every page that anyone might share, which in practice means every public page. The cost is a few lines in a template that reads values you already have. Pages that will never be shared — a checkout step, an internal dashboard — are not worth the effort, and pages you do not want previewed at all are a job for robots directives rather than for omitting tags.

Inside <head>, alongside your other meta elements. Crawlers read the head and many stop parsing once the body begins, so a tag further down the page may never be seen. The same caveat applies to tags injected by client-side JavaScript — most crawlers do not run it, so tags added after load often do not exist as far as they are concerned.

It fails on some platforms and works on others, which is the most expensive kind of bug. Open Graph tags need property and the twitter: tags need name. A parser built strictly on RDFa ignores <meta name="og:title">, while a lenient one accepts it — so a mistake can survive your testing and quietly break elsewhere.

Convert them to HTML entities. A bare double quote inside content="..." closes the attribute early and everything after it is parsed as markup; a bare ampersand is invalid and can be read as the start of an entity, so “Save 50% &copy; 2026” renders a © nobody typed. The generator above escapes &, <, >, " and ' automatically.

Yes. Meta tags are served as UTF-8, so emoji, accents and non-Latin scripts work as themselves and do not need converting to entities. Set og:locale to tell platforms which language the content is in — note that Open Graph writes it with an underscore, en_US, not the en-US of the lang attribute.

Yes. The copy button next to each block puts the tags on your clipboard exactly as shown, ready to paste into your template or your CMS's custom-head field. The Open Graph and X blocks copy separately, or use “Copy all tags” for both at once.

It is free, and nothing you type leaves your device. The tags are assembled in your browser by JavaScript on this page — there is no server call and nothing is stored. The one request that does leave is the preview image, which your browser fetches from the URL you entered so it can be displayed; that is the same request any visitor to your page would make.