Control how links to your website are presented in a Facebook status update

Control how your links are displayed in Facebook status updatesHave you ever wondered how Facebook knows which image and text to show next to a link you post in a status update?

Or, perhaps closer to the truth, why it didn’t get a nice looking title or image when you could clearly see them on the page?

Wonder no more, here is an explanation of how it works, and how you can use it to your advantage in your restaurant marketing efforts.

To visualize what I am talking about, in the below example you can see that a suitable image and exciting text snippet is shown just below the status update for the link about to be posted:

Facebook status update with a link attached

To post a link with a status update, you simply paste it into the status update field, at which point Facebook shows the extra information for the link automatically. You can then remove your link from the actual status update just keeping your additional text.

Why is this important? First of all, it is hopefully not just you sharing links to your site. Whenever someone else shares a link on Facebook you want to make sure you control which image and what text snippet is shown. If you haven’t explicitly defined this in your page, Facebook will make a “best effort” to grab what information there is, which means the image could be something completely non food related, and the text snippet could be the not very exciting address to your restaurant…

With an appealing image and a mouth watering text snippet, you increase the chance of people noticing the link and clicking through to visit your website and place an order or make a reservation!

In other words, in geek speak, this is all about optimising the chance of conversion and make links to your website shared on Facebook bring in visitors who would otherwise not think about you. Incidentally, this tip also enhances your search engine optimisation, adding value to how you are presented in the Google search result.

So, on to the gory details of how this works.

Anatomy of a shared link on Facebook

Anatomy of a Facebook status update with shared link

To be clear, when I use the words “title”, “image”, and “text snippet”, these are the parts of the shared link I am referring to.

Again, to make these items show up in your status update, all you need to do is paste a link to the page you want to share into the status update text field. Once Facebook has fetched the title, image and text snippet you can remove the link from your update to keep the text clean and readable. The link below your update will be clickable for all your fans.

If you have updated your page following the advice herein, but don’t see any changes when sharing the link on Facebook, scroll down to the bottom of this post to learn how to force Facebook to update data they may have saved about the page at an earlier time.

Controlling the title of the shared link

The title, shown in bold below your added status update text, comes from the page you are linking to. This title is not shown on the actual web page though, it is the text in the title tag located in the page HTML code in what is called “the HEAD element”, between the tags <head> and </head>.

Search engines place a lot of value on this piece of text, so for your search engine rankings you should make sure you have a unique and descriptive title tag, with relevant keywords, on every page of your site.

As you now know, the title tag is also used in many other circumstances, such as the Facebook status update! Therefor, make sure the title text is readable, eye catching, relevant and selling. Or in geek speak: make the Call To Action strong!

Keep it short and snappy. Typical search engine guidelines says to keep it below 70 characters, and in the case of the Facebook shared link you want people to be able to take it in at a glance.

Controlling the shared link text snippet

The text snippet below the bold title is your chance to provide some more information about what the person seeing the link might expect if they click it.

This information is again taken from the <head> … </head> part of the web page, using what is called “the meta description” tag. Similarly to the title tag mentioned above search engines make heavy use of this to display under links in a search result page.

Example from the Freebookings start page:

<meta name=”description” content=”Free online reservations software for your restaurant website and Facebook page. Online booking tool, restaurant reservation book, and customer database.” />

Here is your chance to really convince a person who noticed your link that they should visit the page. Describe in selling words why this page is worth a visit, and phrase it in terms of the value it brings to the visitor!

Keep it below 150 characters, as more won’t be shown anyway, and do take the time to write a unique description for each page in your website.

NOTE! If you don’t use the specific meta description tag to supply the text snippet, Facebook (and search engines) will grab any piece of text on your page that they think makes sense. Leaving the selection of this text snippet up to them comes with a big risk of showing just gibberish under your link title. Missed opportunity!

Controlling the image next to the link

The image (“thumbnail”), or more correctly images as you can use the small arrows in the Facebook update tool to step through available images if there are more than one to choose from on the page, will simply be taken from whatever images are found on your page unless you tell Facebook specifically which ones you want to be used.

To specify which images to make available to the person sharing the link, you again place a specific tag in the <head> … </head> section of the page HTML code:

<link rel=”image_src” href=”http://www.freebookings.com/cdn/images/logo.png” />

Where you see “href=” you add the address to the image you want to make available for the status update tool on Facebook. Yes, you can add more than one. Just add separate tags like the one above for each image.

Make sure the images are beautiful, relevant, mouth watering and also, yours! Don’t supply links to images you don’t own the right to use online.

Pro tip: update the cache of your shared link in Facebook

Links that have already been shared on Facebook will be “cached”, which means that Facebook re-uses the same title, text snippet and image over and over again when it is posted in the future by other people (they do this to minimise load on their already busy servers).

To tell Facebook to go and update their cached information for a specific link, you can use a developer tool that is available to everyone (even if you aren’t a registered developer).

Go to the page here (the “Object Debugger”) and paste the link to your page in what lools like a search field, then click the “Debug” button.

You will see a page like the image below, listing what information Facebook has now collected from your page, in order to produce pretty looking status updates when the link is shared. Ignore the part about “Open Graph Warnings”, that’s a topic for a separate blog post, but for the purposes of today you can safely leave them hanging…

Facebook's Object Debugger, great tool to refresh saved information about links to your website

Conclusion

The little details make all the difference, we know this. Same goes for online marketing and social media. This is a one time effort that you can choose to do for your site as a whole, or with individual images and text snippets for your individual pages, but do take the time to get this right to make sure your restaurant brand gets the the right attention.

We hope you found this little tutorial helpful! Let us know any questions, or share your favorite Facebook tips in the comment section below. :)

  • http://sarahrlewis.com/ Sarah Lewis

    Thanks bunches for the details. I’m not in the restaurant biz but found your site through a Google search and really appreciate the clear information.

    • http://www.hultberg.org Manne

      Thanks for your kind words! :)

  • Matt

    Great post there but I have a question, when I debug I see 3 meta images set on the page, how can I remove 2 of them to leave the one that I prefer?

  • http://www.SuccessHackinginCollege.com/ alicia

    You saved my life!! Lol This issue had me stumped for a while! Updating the cache is what I needed to do to my site, many thanks!

  • Anne Keoghan

    Thank you so much. This has helped me to debug an incorrect url on my status update. Much appreciated. Annie :)