What Open Graph tags are
When you paste a link into WhatsApp or LinkedIn, the app fetches the page and builds a little preview card with an image, a title and a short text. Where does that come from? Mostly from Open Graph tags: meta tags in the <head> of your page, defined by the Open Graph protocol.
| Tag | What it does |
|---|---|
| og:title | The headline of the preview card |
| og:description | One or two lines of text under the title |
| og:image | The preview image (must be a full URL) |
| og:url | The main address of the page |
| og:type | The kind of content, usually website or article |
| og:site_name | Your business or website name |
| twitter:card | Tells X which layout to use, for example summary_large_image |
If these tags are missing, each app guesses. You might get a random logo, a cookie banner text or no image at all. X reads the Open Graph tags for title, description and image, but it needs twitter:card to know which layout you want.
Why link previews matter
For many small businesses, a lot of links are shared outside Google: a customer sends your menu to a friend on WhatsApp, a physiotherapist posts a new blog article on LinkedIn, a local group shares your opening announcement on Facebook.
A clear preview with a good photo and a specific title looks trustworthy and gets clicked. A preview with no image or a cut-off title looks like spam. Getting the tags right takes about ten minutes and helps every link that's ever shared.
Example: hair salon
Title: Home | Welcome. No image.
Title: Balayage and Color Specialists in Austin | Studio Lina. Image: a bright photo of a finished hairstyle.
The second preview tells people what they get before they tap.
Image size by platform
One image at 1200 × 630 px (ratio 1.91:1) works well almost everywhere. The values below are approximate; platforms change their layouts from time to time.
| Platform | Recommended image | Notes (approximate) |
|---|---|---|
| 1200 × 630 px (1.91:1) | Use at least 600 × 315 px for the large preview. Smaller images may show as a small thumbnail. | |
| 1200 × 627 px (about 1.91:1) | Uses og:image. Very small images appear as a thumbnail. | |
| X (Twitter) | 1200 × 600 px or 1200 × 630 px | summary_large_image displays at about 2:1, so edges may be cropped slightly. |
| 1200 × 630 px | Keep the file small. Large images (several hundred KB or more) may not show a preview. | |
| Slack | 1200 × 630 px | Reads Open Graph and Twitter tags. Shows a large image or a small thumbnail depending on the message. |
- Keep important content centered. Platforms crop the edges differently, so leave a margin around text and logos.
- Use JPG or PNG. JPG is usually smaller for photos.
- Keep the file size small. Under about 5 MB is a common general limit, but smaller is better. Aim for well under 300 KB if WhatsApp matters to you; that is a rule of thumb, not an official limit.
- Don't put lots of text in the image. It becomes unreadable on a phone.
Example tag block
This is the kind of code the tool generates. Paste it into the <head> of your page and replace the values:
<meta property="og:type" content="website">
<meta property="og:site_name" content="Rosa's Café">
<meta property="og:title" content="Breakfast and Homemade Cakes in Portland">
<meta property="og:description" content="Fresh pastries, specialty coffee and weekend brunch on Oak Street. Open daily from 8 am.">
<meta property="og:url" content="https://www.rosascafe.example/">
<meta property="og:image" content="https://www.rosascafe.example/images/og-cafe.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Counter with cakes and coffee at Rosa's Café">
<meta name="twitter:card" content="summary_large_image">The og:image:width and og:image:height tags are optional, but they help some platforms show the image correctly the very first time a link is shared. og:image:alt describes the image for people using screen readers.
Each page should have its own title, description and, ideally, its own image. At the very least, set a default og:image for every page.
Writing a good preview title and description
Preview cards are small, especially on a phone. Long text gets cut off, and each app cuts at a different point. As a rough guide:
- Title: about 40 to 60 characters. Put the most important words first.
- Description: about 100 to 150 characters. Some apps show one line, others two or three, and WhatsApp may show none at all.
- Be specific: name what you offer and where. "Fresh croissants every morning in Oak Park" beats "Welcome to our website".
The tool checks these lengths and your image ratio and flags anything likely to be cut or cropped. You can also paste your page's HTML and it fills in the fields from the existing tags. The image is loaded by your own browser only to draw the preview; nothing is uploaded or stored.
Caching: why your old preview still shows
Platforms save (cache) a preview the first time a link is shared. If you fix your tags afterwards, the old preview can stick around for days or weeks. Here's how to refresh it:
- Facebook: open the Sharing Debugger, enter your URL and click "Scrape Again".
- LinkedIn: enter the URL in the Post Inspector. It fetches the page fresh and updates the preview.
- X (Twitter): the old Card Validator no longer shows a preview. To check, start composing a post with your link and look at the card before posting. You don't need to publish it.
- WhatsApp: there's no refresh tool. Previews are cached, so add a query parameter like
?v=2to the link (for examplehttps://www.example.com/menu/?v=2). WhatsApp sees it as a new link and fetches it again.
Common mistakes
- Relative image URLs.
/images/og.jpgdoesn't work. Use the full address starting withhttps://. - Image blocked. If your robots.txt blocks the image folder, or the image sits behind a login, platforms can't fetch it. Check with the robots.txt tester.
- Image too small. A 300 × 200 px logo turns into a tiny thumbnail or is ignored.
- Missing og:image on subpages. Your homepage has an image, but blog posts or product pages don't. Then they get a random image or none.
- http image on an https page. Some platforms skip images that aren't served over https.
- Huge image files. A 4 MB photo straight from the camera can make WhatsApp skip the preview. Resize and compress it first.
How to add the tags to your site
Most website builders and CMS tools have a field for social sharing, so you rarely need to write code by hand:
- WordPress: SEO plugins like Yoast SEO or Rank Math have a social tab per page where you set title, description and image.
- Wix and Squarespace: look for social share settings in each page's SEO options.
- Shopify: set a social sharing image in your theme settings; product pages usually use the product image.
- Custom HTML: paste the tag block above into the
<head>of each page.
Your Open Graph title can be the same as your Google title, but it doesn't have to be. Use the SERP preview for the Google side and run the SEO check to see whether a page is missing its Open Graph tags.