Related Content: Customize Page Title, Description, Thumbnail, Author, Tags, Language, Timestamps – Shareaholic Helpdesk

IN THIS ARTICLE

Customize Page Title
Customize Page Description
Customize Page Thumbnail
- What are Image Meta Tags
- For WordPress Plugin Users
Customize Page Tags
Customize Page Language
Customize Page Author
Customize Page Published and Last Modified Date

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

Page Title

Determining a usable page title is a 2-step process:

Shareaholic first scans for the raw page title in the HTML source. The following signals are evaluated in this specific order:
1. Shareaholic Title Tag. For example:
```
<meta name="shareaholic:title" content="7 Hard Truths for Marketing - My Blog" />
```
2. Open Graph Title Tag. For example:
```
<meta property="og:title" content="7 Hard Truths for Marketing - My Blog" />
```
3. HTML Title Tag
```
<title>7 Hard Truths for Marketing - My Blog</title>
```
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
```
The following signals are evaluated to determine Site Name in this specific order:
1. Include the Shareaholic Site Name Tag in your template. For example:
```
<meta name='shareaholic:site_name' content='My Blog' />
```
  Note: if you're using either the Shareaholic WordPress or Drupal family of plugins, this meta tag is setup automatically for your website. Also, Shareaholic Meta Tags are officially registered with W3.org, pass W3C Validation and do not interfere with other tags that you may already use.
2. Include the Open Graph Site Name Tag. For example:
```
<meta property="og:site_name" content="My Blog" />
```
3. Update your Site Profile settings in your Shareaholic Dashboard under Settings -> Website
Note: If you have all 3 methods are specified, Shareaholic will give preference to the signals in the order listed, i.e. Shareaholic tag, Open Graph tag, and then the Site profile setting.

Page Description

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

Shareaholic Description Tag. For example:

<meta name="shareaholic:description" content="Engage with your audience." />

Open Graph Description Meta Tag. For example:

<meta property="og:description" content="Engage with your audience." />

Twitter Description Meta Tag. For example:

<meta name="twitter:description" content="Engage with your audience." />

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, i.e. Open Graph, Twitter tag, and then the Description Meta Tag.

Page Thumbnail

Shareaholic algorithms automatically evaluate the content of a webpage to pick the "best" image to represent the content on a webpage.

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 shared on their network.

Shareaholic Image Tag. For example:

<meta name="shareaholic:image" content="https://foo.com/image.jpg" />

Open Graph Image Tag. For example:

<meta property="og:image" content="https://foo.com/image.jpg" />

Twitter Card Image Tag. For example:

<meta name="twitter:image" content="https://foo.com/image.jpg" />

JSON-LD (this can be placed anywhere on the page). For example:

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "image": {
    "url": "https://foo.com/image.jpg"
  }
 }
</script>

Note: If you have more than 1 tag specified, Shareaholic will give preference to the signals in the order listed.

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.

Page Tags

To determine page tags, all the following signals are evaluated and values aggregated. Shareaholic de-duplicates, lowercases and trims all values:

Shareaholic Keyword Tag. For example:

<meta name="shareaholic:keywords" content="HTML, CSS, post, howto" />

You may also disambiguate or classify keywords into tags (tag:), categories (cat:) and type (type:). For example:

<meta name="shareaholic:keywords" content="tag:HTML, tag:CSS, type:post, cat:howto" />

Open Graph Keyword Meta Tag. For example:

<meta property="og:keywords" content="HTML, CSS, post, howto" />

HTML Keyword Meta Tag. For example:

<meta name="keywords" content="HTML, CSS, post, howto" />

News Keywords Meta Tag. For example:

<meta name="news_keywords" content="HTML, CSS, post, howto" />

Article Tag Meta Tag. For example:

<meta property="article:tag" content="HTML" />
<meta property="article:tag" content="CSS" />
<meta property="article:tag" content="post" />
<meta property="article:tag" content="howto" />

Page Language

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

Shareaholic Language Tag. For example:

<meta name="shareaholic:language" content="en-US" />

HTML Lang Attribute. For example:

<html lang="en-US">
...
</html>

Or:

<html xml:lang="en-US">
...
</html>

Codes should be ISO-639 Language codes.

Page Author

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

Shareaholic Article Author Name Tag. For example:

<meta name="shareaholic:article_author_name" content="Mark Twain" />

Article Author Tag. For example:

<meta property="article:author_name" content="Mark Twain" />

JSON-LD (this can be placed anywhere on the page). For example:

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "author": {
    "name": "Mark Twain"
  }
 }
</script>

Post Author vCard (this can be placed anywhere on the page). For example:

<span class="post-author vcard">
 <span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
   <span itemprop="name">Mark Twain</span>
 </span>
</span>

Page Timestamps

To determine the page published at and modified at timestamps the following signals are evaluated in this specific order. The timestamp should be ISO 8601 formatted.

Shareaholic Publish Time and Modified Time Tag. For example:

<meta name="shareaholic:article_published_time" content="2019-08-05T17:53:26+00:00" />
<meta name="shareaholic:article_modified_time" content="2020-01-05T17:53:26+00:00" />

Article Timestamp Tag. For example:

<meta property="article:published_time" content="2019-08-05T17:53:26+00:00" />
<meta property="article:modified_time" content="2020-01-05T17:53:26+00:00" />

JSON-LD. For example:

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "dateCreated": "2019-08-05T17:53:26+00:00",
 "datePublished": "2019-08-05T17:53:26+00:00",
 "dateModified": "2020-01-05T17:53:26+00:00"
 }
</script>