Customize Thumbnails in the Related Content/Recommendations App

Shareaholic algorithms automatically evaluate the content of a webpage and pick the "best" image to represent the content on a webpage. Most often, this is a large image you've added to be the main image of the page. 
 
If you do not have (or want) an image on a particular page, but you would like a thumbnail image to display in shares and/or Related Content, you can use Image Meta Tags to tell Shareaholic what image best represents the page. You can also use these tags on pages where you have a large image but you would like to specify a different image for the thumbnail.
 
What are Image Meta Tags?
 
In short: Image Meta Tags allow website developers to specify what image (and other content) social networks should use to represent the page when people share it. When you place these tags in the Head section of your page template, you make it easier for apps like Facebook to find the correct image, link, description, etc to use in the preview that is is shared on their network. 
 
How does this apply to Shareaholic Related Content/Recommendations?

If for some reason thumbnails aren't showing up in Recommendations, you can use at least one Image Meta tag on your webpages to fix this. Or, as we mentioned above, it gives you an opportunity to specify a different image on the page than the one that is in the body of the post. 

How to add Image Meta Tags to your website

 
STEP 1: Create Your Image Meta Tag

Pick the image you want to use for that page, upload it to your site's media library (or another site that can host the image like Dropbox), then copy the image url. Finally, paste it in place of the bold url in one of the tags below. 
 
Note: If you have all 3 tags specified, Shareaholic will give preference to the services in the order as listed below, i.e., Shareaholic Image Tag, Open Graph, and then Twitter tag.
  1. Shareaholic Image Tag

    <meta name="shareaholic:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />

  2.  Open Graph Image Tag

    <meta name="og:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />

  3. Twitter Card Image Tag

    <meta name="twitter:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />

STEP 2: Add the Image Meta Tag code to your site template

Copy the tag and paste them before the end of the </head> tag of your page template. 
 
For Shareaholic for WordPress Users:
 
The easiest way to set the page thumbnail for Related Content is to use the Featured Image option in WordPress. This option can be found on the right panel when editing a Post/Page on WordPress. This will allow you to select from existing images in your media library or to upload a new one.
 
 
Note: Featured Image option is available when Shareaholic for WordPress plugin is enabled.
 
 

Related Articles

Have more questions? Submit a request

Comments

Article is closed for comments.