Branded URL Shortening Service

Social Guidance

Knowing exactly which social meta tags to include can be confusing even to experienced webmasters.

Social Guidance, Branded URL Shortening Service

Platforms like Facebook, Google+, Twitter, LinkedIn, and others each use their own particular meta tags, which are used to control your branding when the content from your site is shared on their platforms.

Social Guidance, Branded URL Shortening Service
Image courtesy of Moz.com

Use the “best practices” outlined below to optimize your website to increase social engagement & convert more leads.

Open Graph

Open Graph tags are arguably the most important tags to implement on your site.

These tags are used by Facebook, LinkedIn and Google+ for enhancing any shared content, which means that adding just a few tags to your site can help you to control your presence and branding on these social networks.

Open Graph Title
Open Graph Title tags are one of the 3 most important tags to use on your site for Facebook, Google+ and LinkedIn social sharing. The title tag is what determines the title for any social posts made for the URL.

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Required
Can use multiple times on the same page: No
Tag Placement: Head section
Example:

While most social networks will fall back to using the standard HTML title for your page, it’s always best to set the Open Graph title for your site for a few reasons:

  1. Your meta title may be more targeted for search engine results and the tab name in a browser.
  2. The Open Graph title is always targeted toward social networks and shared views, so you should customize this for your audience.
  3. A browser tab and search engine generally only use smaller portions of the title.
  4. With an Open Graph title, you can customize a title of up to about 100 characters, which gives you more to work with.

Open Graph Description
The Open Graph Description tag is one of the 3 most important tags to use on your site because it’s used directly by Facebook, Google+ and LinkedIn for representing your content in their social networks.

To set the Open Graph Description tag on your page, you should add the following tag within the section of your page

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Required
Can use multiple times on the same page: No
Tag Placement: Head section
Example: 

Without the Open Graph Description set, the social networks will choose a description automatically based on:

  • Your meta description for the page

or

  • Automatically try to determine a good description by scanning the content of the page.

Allowing the social networks to use either of the above options is problematic because neither choice may be correct for your content. The meta description on your page should be completely targeted toward search engines, which means it should be between 150-160 characters and there should be no duplicate descriptions across your site.

Letting the social network determine the best ‘snippet’ to use to describe your page can be even worse as it may choose a menu or sidebar content to represent your page, even though that content is not directly related to the current page.

By setting the Open Graph Description on your own, you are in complete control of how your page is represented when shared in each of the supported social networks.

Open Graph Image
Open Graph Image tags are one of the 3 most important tags to use on your site because the three major social networks Facebook, Google+ and LinkedIn all use these tags when your content is shared.

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Required
Can use multiple times on the same page: Yes
Tag Placement: Head section
Example:

How to set the Open Graph Image Tag
The Open Graph Image tag(s) should be added to the section of your page with the following syntax:

Open Graph Image recommendations
It is acceptable to add multiple og:image tags to each page of your site. The first og:image tag in your section will generally be used as the default image when shared. However, there are benefits to adding additional Open Graph Image tags:

  • For Facebook’s “Share” button, additional og:image tags will let the user choose which image they want to share.
  • Some social networks have dimension restrictions on the image that is shared. By providing additional options, you can help ensure that the best image is available for the networks to display.

In general, it is always recommended to set at least one og:image tag on your page. Without setting any image tag, you are allowing the social network to choose the image they feel best represents the content. In many cases, they will choose incorrectly and something like an RSS icon or some other generic, unrelated, image will be used.

Choosing your image for the og:image tag

  • Set an image with dimensions at least 200×200 px.
  • If possible, use an image with over 1000×1000 px.
  • Facebook recommends images with a 1.9:1 aspect ratio.
  • If targeting social networks other than just Facebook, we recommend a 1:1 (square) ratio with the primary content centered. This allows each social network the option to crop down the image as necessary.

Open Graph Site Name
Open Graph Site Name tags can increase your branding as your site name may be included in posts.

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Useful, but not required
Can use multiple times on same page: No
Tag Placement: Head section
Example:

Here are some guidelines for setting the Site Name:

  • Use the name of your website. Not your URL, but the name (i.e. “IMDb” not “imdb.com”.)
  • If your object is part of a larger website, use the name which should be displayed for the overall site.

Open Graph URL
Open Graph URL tags serve as a unique identifier for your post. For some social networks, it is important to set in order to aggregate likes and shares for the URL.

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Useful, but not required
Can use multiple times on the same page: No
Tag Placement: Head section
Example:

Here are some guidelines for setting the URL:

  • Do match your canonical URL used for SEO.
  • Do not include any session variables, user identifying parameters or counters.
  • The URL set will be used for all attribution of shares and comments. Any changes you make will cause future shares to attribute to a different URL and you will lose all likes/shares and comments you’ve received until that point.
  • When used improperly, likes and shares can be spread across all of the variations of the same URL. For example, the following pages may all have the same ‘content’, but the sharing counters and (if used) Facebook comments would be different for each:
    • https://busses.xyz/open-graph/url
    • https://busses.xyz/open-graph/url?special-query-string=1
    • https://busses.xyz/open-graph/url-test (assuming this shows the same content as the other URLs)

Open Graph Type
Open Graph Type tags are useful to indicate what type of content you are sharing. Social networks may display content differently based on the type of media. Additionally, each type of content may have additional fields that are available to use to describe your content.

Social Networks Supported: Facebook Google+ LinkedIn
Importance: Useful, but not required
Can use multiple times on the same page: No
Tag Placement: Head section
Example:

Here are some different commonly supported types:

  • article
  • book
  • profile
  • website
  • music.song
  • music.album
  • music.playlist
  • music.radio_station
  • video.movie
  • video.episode
  • video.tv_show
  • video.other

User-defined custom types are also supported via Open Graph. These consist of a namespace and a property.

Facebook App ID

Facebook App ID tags let Facebook know the identity of your site, which provides additional benefits like social analytics, comments moderation and authentication capabilities to your site.

Social Networks Supported: Facebook

Importance: Useful, but not required

Can use multiple times on the same page: No

Tag Placement: Head section

Example: 

A Facebook App ID isn’t required for Likes and Comments (or most other Facebook social widgets) to function. However, if you create a Facebook Application, you can enable additional features on your sites like Facebook authentication, invitations, and Open Graph Actions.

Advantages of setting the FB:app_id Open Graph value:

  • Facebook Insights area, an analytics dashboard for social sharing from your site
  • Facebook Comment Moderation Tool, where you can see all comments left across your entire website
  • Facebook authentication – This may require an additional add-on for your site (ex. JFBConnect for Joomla)
  • Your Facebook Application ID can be found in the Facebook Developers Area.

The recommendations for setting the Facebook App ID are:

  • Set only one tag with the FB:app_id value
  • The app_id value is a numerical string from about 9-20 digits long

Twitter Cards

Twitter Cards are social meta tags specific to Twitter. These tags create ‘cards’ that are shown alongside any Tweets that you’re site is included in. If you are targeting Twitter or think your content may be shared, you should be adding these tags.

Please note: For Twitter to include a ‘card’ for your site, you must first be approved.

Twitter Title
Twitter Title tags are one of the 3 most important tags to use on your site for Twitter social sharing. The title tag is what determines the title for any social posts made for the URL.

Twitter Description
The Twitter Description tag is one of the 3 most important tags to use on your site because it’s used directly by Twitter for representing your content in their social networks.

Twitter Image
Twitter Image tags are one of the 3 most important tags to use on your site because Twitter uses these tags when your content is shared to represent the content of your page.

Twitter Card
Twitter Card tags are one of the most important tags to use on your site for Twitter social sharing. The card tag tells twitter what type of card is being defined for your page.

Twitter Site
Twitter Site tags indicate the Twitter account for the website or platform for which the content was published. The site tag helps users follow and view the profile for your website.

Twitter Creator
Twitter Creator tags indicate the Twitter account of the person that created the card content. The site tag helps users follow and view a person’s profile.

Schema Microdata

Schema.org Microdata is inline syntax used anywhere in the body section of your site to denote the title, description, image, type of page and other information. Microdata can be more complex to add since it’s done inline, which means you may have to make modifications to whatever generates your page’s output.

Schema.org Microdata is used by multiple search engines as well as Google+.