The Picture Facebook Picks When Your Page Is Shared

A share that shows the wrong picture

A customer likes a page on your site and shares it on Facebook. Her friends see a preview with the card logos from your footer, a title cut off halfway and a line from the menu.

Or it shows the photo from the sidebar, a staff picture from another part of the site, or no picture at all. The page is fine; the preview built from it is not.

Nobody at the business sees it happen. The share goes out under the customer's name, with your page looking careless, to people who may never have heard of you.

How Facebook builds a preview

When a link is first shared, Facebook fetches the page and looks for Open Graph tags: a few lines in the page's code that name the picture, title and description to use.

Without them, it guesses. It takes the page title, picks text from near the top and chooses an image that meets its minimum size: perhaps a badge, a logo or a photo meant for something else.

Then it remembers what it found. Later shares of the same address can keep showing that stored version, even after the page changes, until Facebook fetches it again.

The tags that set the preview

Five tags cover what a small business site needs. Each sits in the head of the page, invisible to visitors:

• og:title, the headline, which can be shorter than the page's own title.
• og:description, one or two sentences about the page.
• og:image, the full address of the picture to show.
• og:url, the page's main address, so variations count as one page.
• og:site_name, the business name as customers know it.

The image decides most of how the share looks. The title matters next, since Facebook cuts long titles short, and titles written for search often trail the business name and a city.

A picture that displays well

When the image is large enough, Facebook shows it across the full width of the post. When it is not, the share gets a small square beside the text, which is easy to scroll past.

Facebook recommends images of at least 1,200 by 630 pixels, and at least 600 by 315 for the large format. Smaller images, down to 200 by 200, appear only as a thumbnail.

Keep the main subject near the centre, since the picture may be cropped, and do not rely on words inside the image; the share already carries the title and description as text.

Use a photograph rather than a graphic where you can. A real photo of the place, the product or the event reads as a recommendation; a designed banner reads as an advertisement.

One picture for each page

Setting one og:image for the whole site, usually the logo, fixes the card logo problem and creates another: every share looks the same, whether it is an event or the home page.

Give each important page its own picture: the product on a product page, the best photograph of an event, a finished job on a service page. Most content systems can take it from each page's main image.

Pages nobody would share, such as the privacy policy, can fall back on a default picture that says what the business does.

Making Facebook look again

Changing the tags does not change shares that already exist, and it may not change the next share either, because Facebook still holds its stored copy.

Facebook's Debugger page for developers deals with that. Paste in the page's address and it shows what Facebook sees, the tags it found and any problems, with a button to fetch the page again.

Run it on every page whose tags change, and again on the pages you expect people to share this week.

A worked example

A triathlon club in an interior city runs swim, bike and run training groups and organises a sprint triathlon each June. Registration for the race opens in the fall.

When it opened this month, members shared the race page on Facebook. The previews showed the card logos from the registration footer, a title reading the club's name and Home, and text from the menu.

The site had no Open Graph tags at all. The club asked its web developer to add them to the template, using each page's title, a short description and its main photograph.

The race page now uses a photograph of the swim start at 1,200 by 630 pixels, a title naming the race and its date, and a description giving the distances and the registration deadline.

The developer ran the race page and the other main pages through the Debugger, and new shares show the swim start.

Facebook no longer has to guess: the page tells it what to show, and the Debugger makes it read the page again instead of reusing its first look.

Shares of the home page

The home page gets shared too, often by someone recommending the business as a whole. Its picture should show what you do best, not the logo on a white background.

Its description should say what the business is and where, in a sentence a stranger would understand without having visited.

Check it on a phone too, since many people first see shares in the narrow column of the Facebook app.

The counter-case

A site whose pages are rarely shared, such as a wholesaler with a short list of trade accounts, gains less from careful tags on every page.

Even there, the home page and the contact page deserve tags, because those are what a satisfied customer passes on. A preview showing card logos makes even a warm recommendation look careless.

For anyone selling to the public, sharing is how pages travel. The tags take minutes to set once, and every share after that shows what you chose.

Choosing what a share shows

1. Paste your main pages into Facebook's Debugger.
2. Note what it shows for picture, title and description.
3. Add Open Graph tags to the site's template.
4. Choose a picture for each important page.
5. Size each picture at 1,200 by 630 pixels.
6. Write a short title and a one-line description.
7. Fetch each page again in the Debugger.

Step seven is the one most often skipped. Without it, Facebook can keep showing the old preview for a while, and it looks as though the new tags did nothing.

When the picture does carry an offer or a date, the words still belong in the text of the post, as covered in social posts that are only a picture of words.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.