Customize Preview Thumbnail Images for Pages on Your Website

Open Graph tags

Here is an example of the open graph tags I would insert into the <head> section of the page . If you don’t know code, ask a developer for help. Using this META tag strategy, you can define the images, text, and other items to use when sharing a page on your website.

site_name

This one is pretty standard. Add the name of your website.

<meta property="og:site_name" content="Your Website Name Here"/>

title

What is the title of the page for this particular URL? Specify that here. In our experience, the title length can be around 90 characters before it gets cut off.

<meta property="og:title" content="Your awesome title goes here, about 90 characters in length."/>

description

This tag tells Facebook how you want your website categorized. Are you sharing a post from your blog? Specify blog.

<meta property="og:description" content="Compelling description of URL that is about 300 characters in length."/>

image

This is the tag that tells Facebook, “Hey Facebook, use this image as the thumbnail anytime the page is shared.” This is where I would add the file URL of the above image.

<meta property="og:image" content="YOURIMAGEURLGOESHERE.JPG">

url

This is where you would add the URL of the page that is being shared.

<meta property="og:url" content="http://yourcontentURLgoeshere.com/">

type

This tag tells Facebook how you want your website categorized. Are you sharing a post from your blog? Specify blog.

<meta property="og:type" content="blog"/>

All together in your header it will look like this

You can copy and paste to your header and modify the apropreate code.

‹head›
<meta property="og:site_name" content="Your Website Name Here"/> <meta property="og:title" content="Your awesome title goes here, about 90 characters in length."/> <meta property="og:description" content="Compelling description of URL that is about 300 characters in length."/> <meta property="og:image" content="YOURIMAGEURLGOESHERE.JPG"> <meta property="og:url" content="http://yourcontentURLgoeshere.com/"> <meta property="og:type" content="blog"/>
‹/head›

When posting on media sites:

Some times sites save old data in there cash, so you need to do the following to force them to use the new information you added.

When putting the link on media sites like Facebook or LinkedIn add:

/?latest

to your domain. i.e.

https://www.yourdomain.com/?latest

and then it should show correctly.