What a shared link looks like is decided by the Open Graph tags in the <head> section of the page. No tags? Then Facebook, LinkedIn or a messaging app guess the title and image on their own. And they guess differently.
Instead of the photo from the post you get the logo from the footer, some icon or an empty tile. Below I go through which tags to add and how to prepare the image. I also cover how to set this up in WordPress and how to force a platform to refresh the preview when it stubbornly shows the old version.
Table of contents
What are Open Graph tags and where do platforms get the link preview from?
They are meta tags that tell a social network which title, image and address to use when describing a page. According to the Open Graph protocol specification, they turn an ordinary page into an object that the platform displays just like its own content. Technically, they are simply extra <meta property=”og:…”> elements in the document head. The visitor does not see them. At all.
Facebook, LinkedIn and most messaging apps read from the same tags. One implementation, many places at once. Just do not confuse them with schema.org data (it is a common mistake). Meta tags for social media control what a share looks like. And what structured data is is a different story: a description of the content for search engines.
Which Open Graph tags are required and which are worth adding?
The specification requires four properties on every page. A few more improve the look and accessibility of the preview. The required ones are:
- og:title - the title that should appear in the preview,
- og:type - the type of object, usually article for a blog post,
- og:image - the address of the image shown in the tile,
- og:url - the canonical address, which the platform uses as a permanent identifier of the page.
On top of that I recommend a few supplementary tags. og:description is a short description. og:image:alt describes the image for screen readers (and in my opinion it is the one skipped most often). og:locale gives the language and region, and og:site_name the name of the site. A full set for a single post can look like this:
<meta property="og:title" content="How to set a link preview" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/link-preview/" />
<meta property="og:image" content="https://example.com/img/link-preview.jpg" />
<meta property="og:image:alt" content="Link tile with the title and photo of the post" />
<meta property="og:description" content="A short description of the post for the preview." />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Site name" />og:image: image size, format and aspect ratio
The dimensions and aspect ratio of the image have to match the current documentation of the platforms. If they do not, the image will be cropped or will shrink to a small thumbnail next to the text. Meta and LinkedIn change their requirements from time to time. So before you make an image template, check the help pages of the given platform, not a guide from a few years ago.
Whatever the dimensions, a few simple rules work well:
- give an absolute address with https, not a relative path,
- keep the most important element and any text in the center of the frame, because the edges sometimes get cut off,
- prepare a separate image for each post instead of one logo for the whole site.
Oh, and the preview on Facebook and the link thumbnail on LinkedIn take the same og:image. So one properly made file usually covers both sites.
How to set Open Graph tags in WordPress and on other sites
In WordPress the easiest way is to leave it to an SEO plugin, which generates the tags for every post on its own. Three steps and you are done:
- Install and configure an SEO plugin, for example Rank Math or Yoast.
- In the post editor, open the social media tab and set the title, description and image for sharing.
- Save the post and check in the page source whether the og: tags have the right values.
Here is how it looks on our side: on web-systems.pl, og:title, og:image, og:image:alt and og:locale are generated by Rank Math. And one more thing. The title and description for social media do not have to copy the meta title written for Google. They can be shorter and more catchy. The rules are basically the same as when you do copywriting for search engines, only the reader is somewhere else. They are scrolling a feed, not search results.
In online stores and on sites without WordPress, the tags go straight into the header template. Usually this happens along the way, when you order website development for companies. Do watch out for duplicated tags, though. A theme plus two plugins, each adding its own, and the platform picks the wrong image. A classic.
Why does the link preview not change and how do you refresh it?
Because platforms keep the preview in cache. So after you fix the tags, you have to force the page to be fetched again. On Facebook you do it in the Sharing Debugger from Meta, on LinkedIn in the Post Inspector. You paste the address, the tool fetches the page again and shows what it read from it, along with warnings. How exactly the cache works is described in the documentation of each platform.
I always start the diagnosis with the page source view in the browser. No tags there? Then no debugger will help. The most common culprits are:
- an image smaller than the platform requires,
- the image address given as a relative path,
- the platform’s crawler blocked in robots.txt or in the server’s security settings,
- a redirect chain leading to a different version of the address,
- a missing og:url or an address that does not match the canonical one.
The link preview as a permanent part of publishing
There is nothing to overthink here, a habit is enough. With every new post, set the image and title for sharing, and before you drop the link anywhere, run it through the debugger. A well-kept tile works both in organic posts and in ads. That is why well-set Open Graph tags are the foundation that social media campaigns stand on.
Frequently asked questions
Do Open Graph tags affect rankings in Google?
No. Google does not take them into account when determining rankings. But they decide what a link looks like after it is shared, and that determines whether someone clicks it and how much traffic comes from social media.
Do LinkedIn and Facebook need separate tags?
Usually not, because both sites read og:title, og:image and og:description. A separate image is made only when the documentation of one of the platforms requires a different aspect ratio than the one you already use.
What to do when the old image still shows after changing og:image?
Force the address to be fetched again in the Sharing Debugger or the Post Inspector. Did that not help? Upload the image under a new file name and replace the address in og:image. A platform can keep the image itself in memory, independently of the page.
