Generate OG and Twitter Card meta tags for social media sharing
When someone pastes your URL into a social platform or a chat app, that service fetches the page and builds a preview card from Open Graph tags. Without them it guesses, usually badly, picking a random image and the first text it finds. A few lines in your head turn an unremarkable link into a card with your headline and artwork, and it is one of the highest-leverage changes you can make to how your content travels.
website or article.Twitter and X read a parallel set of twitter: tags, though they fall back to Open Graph when those are absent. The one worth setting explicitly is twitter:card with the value summary_large_image, which is the difference between a small thumbnail and a full-width image.
Use 1200 by 630 pixels, a ratio of roughly 1.91 to 1. That is the size most platforms crop toward, so designing to it means nothing important gets cut. Keep text large and near the centre, because previews are often displayed small and edges get trimmed. The image URL must be absolute, including the protocol and domain, and must be publicly reachable without a login, which is the most common reason a preview silently fails to appear.
Platforms cache aggressively. Once a URL has been scraped, changing the tags does not refresh the card on its own. Each major platform provides a debugging tool that re-fetches a URL and shows exactly what it parsed, and running that is usually the fastest way to both clear the cache and diagnose a missing image.
Do I need both Open Graph and Twitter tags? Open Graph covers most platforms; add twitter:card for the large image treatment.
Can og:title differ from my page title? Yes, and it often should, since a social headline can be punchier.
Why is my image missing? Usually a relative URL, a login-protected file, or a cached old scrape.
Open Graph is the protocol that decides what a link to your page looks like when it is shared on social platforms and chat apps. When someone pastes your URL, the platform reads the og tags from your head and builds the preview card: the headline, the description, and the image. Without them the platform guesses, and the guess is often wrong or blank.
The Open Graph protocol defines four basic required properties: og:title, og:type, og:image, and og:url. Adding og:description and og:site_name is strongly recommended because they fill out the card. For the image, a landscape picture around 1200 by 630 pixels is the widely supported size that displays cleanly on most platforms without being cropped awkwardly.
Because each platform caches previews, changes may not appear immediately; most major platforms provide a debugging or sharing-preview tool that re-fetches your page so you can confirm the card before you publish. The generator above writes a valid tag block you can paste in, and it uses absolute URLs for the image and page, which the protocol requires.
Source: The Open Graph protocol