Structured data and social previews
How to add Open Graph tags for link previews
These pages have no Open Graph tags, so when somebody shares the link on Slack, LinkedIn, or WhatsApp, the preview is blank or scraped at random. It does not affect ranking; it affects whether anybody clicks a shared link.
What it is, and what it costs
Open Graph tags (
og:title, og:description, og:image) tell social platforms and chat apps how to render a link preview. Without them, the preview is a guess (no image, a stray line of text), and a shared link with a blank card gets far fewer clicks than one with a clear title and image.How to fix it
Add og:title, og:description, and og:image to the head of each page, and a matching twitter:card for X.
- WordPress: Yoast and Rank Math generate Open Graph tags and let you set a per-page share image.
- Shopify: good themes output them; set social images in theme settings and per product.
- Hand-coded: add the
og:meta tags to your head template, with an image around 1200×630.
How to check your site
View source for og: tags, and paste the URL into a preview debugger (LinkedIn Post Inspector, or opengraph.xyz) to see the card.
Questions people ask
- What size should the og:image be?
- Around 1200×630 pixels. Smaller images may be cropped or ignored by some platforms.
Does your site have this?
Check your site to see how your links preview when shared.
See also
- How to add structured data for rich resultsStructured data is the markup behind the rich results you see in Google: the star ratings, the prices, the FAQ drop-downs. A result with one of those takes up more room and pulls more clicks than two plain lines of text.
- How to fix title tag problemsThe title tag is the line people read in search results, and the strongest single signal on the page about what it is for. Four things go wrong with it, and a site with one of them usually has two. Each is below, with what it costs and how to put it right.
- How to fix meta description problemsThe meta description is the sentence under your link in search results. It is not a ranking factor, which is exactly why it gets neglected — and it is what decides whether anybody clicks the result you worked to earn. Three faults account for almost all of it.
- How to fix H1 heading problemsThe H1 is the visible heading that tells a reader — and a search engine — what a page is about before either goes any further. Three faults are common, and a template is behind most of them, which means one fix usually clears the whole site.