Linked Images in Facebook

There is a way to specify which image for Facebook to pull in when you post a URL. There are specific meta tags that instruct Facebook. (Although this article has a focus on facebook, the technique presented here probably will work at other social media sites.)

The index page at vernharrison.com is the demonstration for this article.

The web page being linked to has three specific meta tags in the header area of the source code. The tags specify (1) the URL of an image, (2) a title, and (3) a description.

Here are the three meta tags at the https://vernharrison.com/ page (as of this writing).

<meta property="og:image" content="https://vernharrison.com/assets/VernHarrisonAuthor-700w.jpg">
<meta property="og:title" content="Dark Old West Trilogy; Vern Harrison, Author">
<meta property="og:description" content="Fictionalized dark aspects of the American Old West.">

In the above source code, the blue is the property and the red is the content. See Doing Your Own for implementation instructions.

To post the image and link it to the web page, simply type or paste the URL of the web page where you would type the text of your post.

Here is a post example.

The person who writes with the Vern Harrison pen name is also an author of technical stuff that I enjoy. Vern Harrison writes novels related to the Old West in the USA. https://vernharrison.com/

When that is posted at Facebook, a Facebook bot will scan the source code of the https://vernharrison.com/ page and find the meta tags.

Facebook will grab the image that you see below because that is the image at the property="og:image" attribute's content=... URL.

<meta property="og:image" content="https://vernharrison.com/assets/VernHarrisonAuthor-700w.jpg">

In addition to your text post, the image is posted with the title and description information the bot also found in the meta tags. The image is linked to the https://vernharrison.com/ page.

Try posting the text suggested in the post example above to see for yourself how it works at Facebook. If you don't want to keep the post, it can be deleted. Try the example text at other social media sites, too, so you know which will publish the image and which will not.

 
Doing Your Own

To implement this, put the three meta tags into the head area of the source code of the web page you will be linking to. Here is a template you may use.

<meta property="og:image" content="--URL-OF-IMAGE--">
<meta property="og:title" content="--TITLE-FOR-PAGE--">
<meta property="og:description" content="--DESCRIPTION-OF-PAGE--">

In the above template, the blue is the property and the red is the content.

og:image

Property og:image is for specifying the URL of the image. Replace --URL-OF-IMAGE-- with the URL of the image. The URL must be publicly accessible (no login or other restriction). The image may be at another domain.

og:title

Property og:title is for specifying the title for the web page. Replace --TITLE-FOR-PAGE-- with the title. When the title is published, it might be cropped if it is too long to fit within the space Facebook provides for titles.

og:description

Property og:description is for specifying a description for the web page. Replace --DESCRIPTION-OF-PAGE-- with the description. When the description is published, it might be cropped if it is too long.

Every web page that you will link to in Facebook (or that others might) needs those three meta tags in order to specify an image, a title, and a description to go along with the post.

(This content first appeared in Possibilities newsletter.)

Will Bontrager