Related Content: Customize Page Title, Description and Thumbnail

Follow

IN THIS ARTICLE

Shareaholic algorithms automatically evaluate the content of a webpage and select the most appropriate title, description and thumbnail. This articles lays out what signals we evaluate in order to make the selection.

Page Title

Determining the page title is a 2-step process:

  1. Shareaholic first scans for the HTML Title Tag present on the webpage. For example:
    <title>7 Hard Truths for Marketing - My Blog</title>
  2. We then remove the Site Name and page description from the title to produce a clean, usable title. For example:
    7 Hard Truths for Marketing
    You can specify your Site Name in two ways:

    1. Include the Shareaholic Site Name meta tag in your template
      <meta name='shareaholic:site_name' content='My Blog' />
      Note: if you're using either the Shareaholic WordPress or Drupal plugin, this is set automatically. Also, Shareaholic Meta Tags are officially registered with W3.org so they are 100% compliant and do not interfere with other tags that you may already use.
    2. In your Site Profile settings in your Shareaholic Dashboard under Settings -> Website

      shareaholic-site-name.png
    Note: If both methods are used to define the site name, the Shareaholic Site Name Meta Tag is given the preference.

Page Description

To determine the page description, the following signals are evaluated in this specific order:

  1. Open Graph Description Meta Tag. For example:
    <meta property="og:description" content="Engage with your audience." />
  2. Twitter Description Meta Tag. For example:
    <meta name="twitter:description" content="Engage with your audience." />
  3. HTML Description Meta Tag. For example:
    <meta name="description" content="Engage with your audience." />

Note: If you have all 3 tags specified, Shareaholic will give preference to the signals in the order listed above, i.e. Open Graph, Twitter tag, and then the Description Meta Tag.

Page Thumbnail

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) any image tags, 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?

Image Meta Tags allow websites to specify what image 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.

  1. Shareaholic Image Tag. For example:
    <meta name="shareaholic:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />
  2. Open Graph Image Tag For example:
    <meta name="og:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />
  3. Twitter Card Image Tag For example:
    <meta name="twitter:image" content="http://www.yourwebsite.com/images/page_thumbnail.jpg" />

Note: If you have all 3 tags specified, Shareaholic will give preference to the signals in the order listed below, i.e. Shareaholic Image Tag, Open Graph, and then Twitter tag.

For Shareaholic WordPress Plugin 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. Behind the scenes, Shareaholic plugin sets the Shareaholic Image Tag with this value automatically.


Note: Featured Image option is available when Shareaholic for WordPress plugin is enabled.