Blog › SEO & content
Open Graph tags: make your links look good when shared
Open Graph tags control the title, description and image shown when your link is shared. Which tags you need, the right image size, and how to test them.
· 4 min read
Open Graph tags are a few lines in a page's HTML that tell social networks and chat apps what to show when someone shares its link: the title, a description and a picture. Without them, a shared link is a bare address, or a preview the app guessed badly. With them, it is a card people want to click.
You need five tags, one image, and a way to test. Here is all of it.
What a link preview is made of
When you paste a link into LinkedIn, Slack, WhatsApp or a text message, the app fetches the page and reads its tags. It builds a card from:
- A title
- A description
- An image
- The site's address
If the tags are missing, the app improvises. It may pick a random image from the page, cut a sentence in half, or show nothing.
The five tags you need
Put these inside the <head> of every page:
<meta property="og:title" content="How to run a meeting that ends on time" />
<meta property="og:description" content="Send a three-line agenda and give one person the clock. A short guide." />
<meta property="og:image" content="https://example.com/images/meetings.jpg" />
<meta property="og:url" content="https://example.com/blog/meetings" />
<meta property="og:type" content="article" />
| Tag | What it does | Tip |
|---|---|---|
og:title |
The headline on the card | Can be friendlier than your page title |
og:description |
One or two lines under it | Say what the reader gets |
og:image |
The picture | A full address, not a relative one |
og:url |
The page's one true address | The clean version, with no tracking codes |
og:type |
The kind of page | article for posts, website for most others |
The card for X
X reads its own tags and falls back to Open Graph for the rest. Add two:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/images/meetings.jpg" />
summary_large_image gives the big picture card. Without it you get a small thumbnail.
Getting the image right
The image does most of the work, and it is where most previews go wrong.
- Size: 1200 by 630 pixels is the widely used shape, a little under two to one.
- Keep it light. A large file may time out and not show at all.
- Use an absolute address starting with
https://. - Keep text large and central. Apps crop the edges differently.
- Make it readable small. Most people see the card on a phone.
- One image per page where you can, not the same logo everywhere.
A simple, good image: your headline in large type on a plain background, with your logo in a corner.
Common problems
The old image keeps showing. Networks cache previews. After changing a tag, use the platform's own preview or inspection tool to ask it to fetch the page again.
No image appears. Check the address is complete and public, the file is not huge, and nothing blocks the platform's crawler.
The wrong title. There may be two og:title tags on the page, often one from a theme and one from a plugin. Keep one.
It works on one network and not another. Each reads tags slightly differently. Test on each one you care about.
The page is built in the browser. If your site renders with JavaScript, the tags must still be in the HTML the server sends. Preview crawlers generally do not run scripts.
How to test
- Paste the link into a private chat with yourself on the apps you use. This is the quickest test.
- Use the platforms' inspection tools where they exist. They show what was read and let you refresh the cache.
- Run a checker that fetches the page and reports each tag.
FinalPost AI has one built in. The share readiness check takes any public address and returns a score, a live preview of how the link unfurls, and a prioritised list of fixes. It checks eight things: that the page loads, the title length, the description length, all five Open Graph tags, the X card, a site icon, structured data and fast-indexing setup. Add a Share Readiness agent and it re-runs the check on a schedule, so a redesign that drops your image does not go unnoticed.
Beyond the preview
The same care pays off elsewhere.
- Title and meta description shape how you appear in search results. See the on-page SEO checklist.
- Structured data helps search engines and AI answer engines understand the page. See structured data for small sites.
- A site icon makes your tab and your bookmark recognisable.
A ten-minute fix list
- Add the five Open Graph tags to your page template.
- Add the two X tags.
- Make one 1200 by 630 image for your home page.
- Make an image for your most-shared page.
- Test both in a chat app.
- Refresh the cache on the networks you use.
Do it once and every link you share from then on works harder.
Frequently asked questions
Do Open Graph tags help SEO?
Not directly. They change how your link looks when shared, which affects how many people click it. More clicks and shares help in indirect ways.
What size should an Open Graph image be?
1200 by 630 pixels is the common standard and displays well on most networks. Keep the important content away from the edges.
Why is my link preview not updating?
Platforms store previews for a while. Use the network's preview or inspection tool to make it fetch the page again after you change the tags.