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. This image would be used in post shares that allow for images like Facebook. Most often, this is the "Feature Image" or 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 our Related Content, you can use Open Graph Tags to tell Shareaholic what image to use to represent the page. You can also use Open Graph Tags on pages where you have a Feature Image but you would like to specify a different image.
 
What are Open Graph Tags?
 
In short: Open Graph 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 of these tags 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 Open Graph Tags to your website
 
STEP ONE: Create Your Open Graph 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 above, 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/yourwebpage.jpg" />

  2.  Open Graph Image Tag

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

  3. Twitter Card Image Tag

    <meta name="twitter:image" content="http://www.yourwebsite.com/images/yourwebpage.jpg" />
STEP 2: Add the code to your site template
Copy and paste the tags and paste them before the end of the </head> tag of your page template. 

Related Articles

Have more questions? Submit a request

Comments

Article is closed for comments.