The abundance of social media in everyday life is not slowing down, but rather becoming more consuming.

We’ve now come to know the importance of keeping popular social media channels in your industry updated and well-kept, but what about the relationship between your website and social media channels?

Social markup helps create a defined relationship between your eCommerce website and the related social channels. It also helps improve product pages from a social standpoint by giving you the power to control how they are presented to your social audiences.

social ecommerce

Overview

The four main social platforms that use social markup are Facebook, Twitter, Pinterest and Google+. This overview will not include a section on Google+ because that social platform is not one we would recommend focusing much time on, as the user base has declined heavily over the past five years and engagement is very low.

As far as the other three, adding social markup to enhance the user experience on these social platforms will only have positive outcomes. Crafting the right message for each specific audience using social markup is extremely beneficial to building clicks, shares and social traffic coming from these platforms.

Facebook and Pinterest both use open graph metadata, while Twitter uses Twitter Cards. However, if Twitter Cards are not detected, Twitter can still recognize open graph tags.

 

Social Graph Objects

The implementation of social markup for the three platforms is explained below.

Facebook Open Graph Tags

There are very few instances where Facebook Open Graph tags aren’t a must-have on a website at this point in time. Unless Facebook has no relevance in your industry, this addition is worth the effort. Having your website and social profiles working together seamlessly will help you stay in front of your audience.

Facebook Open Graph “promotes integration between Facebook and other websites…put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.).”– Kirk Williams, Kissmetrics

facebook OG tags

 

Implementation of Open Graph tags can be quick or fairly time-consuming, depending on whether it is added manually or through a plugin, like on a WordPress site. The gist of implementation is that you need to add the correct Open Graph meta tags into the head section of each page of your website.

You add the Open Graph meta tags to the <head> section of the code. For example, on your eCommerce site, you would use the ‘product’ type tag in the <head> section of the code on your product/service pages. There are four tags (shown below) that Facebook requires you to use on every page:

 

  • og:title
    • Title of object
  • og:type
  • og:image
    • Image URL
  • og:url
    • Canonical URL of object

 

There is an extensive list of other tags that can be used, and it is advised to use more to ensure your offering as much information as possible.

Twitter Cards

Twitter Cards help to ensure that your website and Twitter work together to deliver users the best experience possible. As mentioned earlier, this is the preferred way to markup content for Twitter, but Twitter does also recognize Open Graph. Twitter Cards offer an experience that is more specific to the platform and translate best.

“With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a ‘Card’ added to the Tweet that’s visible to all of their followers.”Twitter Developers

 

twitter cards code

Adding Twitter Cards can be done by simply adding meta tags in the header section of each page. Again, there are also platform specific plugins available to aid in the implementation of Twitter Cards.

 

You start by adding a tag that specifies the Twitter Card type (see the different Card types here):

EX.- <meta name=”twitter:card” content=”summary_large_image” />

This specific tag uses a large image, which is great to use on the product pages of your website.

Next you must specify the Twitter account @ name by using the site tag:

EX.- <meta name=”twitter:site” content=”@goinflow” />

 

Then you can add any other tags that apply to the page you are on. Here are all the different Twitter Card tags to choose from. Add the tags you feel will enhance the user experience.

Twitter also offers Card analytics, so you can dig into the performance of your Twitter Cards and improve based on analysis.

Rich Pins

Rich Pins: Priduct Pins example from Pinterest

 

Rich Pins are another type of social markup used to enhance the user experience between your website and Pinterest. This Pin type shows users more information when a page from your website is pinned. This is especially great for eCommerce websites because the product Rich Pins show pricing and availability information right on the Pin.

To implement Rich Pins on your website, you can use Open Graph, Schema.org or oEmbed.  The easiest route would probably be via Open Graph tags (since they are already used for Facebook markup) and Schema.

The first step is to apply for Rich Pins by getting the Open Graph data correct on one page of the site and using the validator tool to apply. This will tell you if you have any data missing for the specific Rich Pin type you are using. If you are not missing any, then you will have to select how your page is marked up and then hit apply. You only have to validate one URL to enable Rich Pins for your entire domain.

There are six different types of Rich Pin markups you can use. You can see the different types, along with their requirements, here. Some of the Rich Pin types require Schema markup code rather than Open Graph.

Determine which, if any, Rich Pins would be beneficial for your site and then implement them by using the correct code requirements for that type.

Possible Risks of Social Markup

Facebook Open Graph Tags

If implemented correctly, there are no risks to adding Facebook Open Graph tags to your eCommerce site. If there are mistakes in the code, then users may not see the content/images you’d like them to see when sharing links on Facebook. You can use the Facebook Debugger tool to check if your Open Graph tags are correct and have the required information.

facebook debugger for og tags

Twitter Cards

Just like with Facebook Open Graph Tags there are no risks to adding Twitter Card markup to your website when implemented correctly. Code mistakes could result in users not seeing the content/images you’d like them to see when sharing links on Twitter. Use the Twitter Card validator tool to check if your Twitter Card tags are correct and contain the correct information.

Rich Pins

With Rich Pins you’ll also need to get the code correct to be successful. You may not get validated if your Open Graph tags aren’t implemented correctly. You can use the Rich Pins validator tool to activate Rich Pins for your entire site, as well as verify your Rich Pins have the required information. There are resources available to troubleshoot your code if you are having problems getting validated.

Level of Effort

The average level of effort for implementing social markup on all three platforms is medium meaning it can be time-consuming if done manually, but made quite easy if a plug-in is available.

Facebook Open Graph Tags

For Facebook, it’s just a matter of inputting the information and spot-checking URLs to ensure the data is correct.

If you are already using Open Graph tags, you can use a tool like DeepCrawl to crawl the site and return errors found within your Open Graph markup for Facebook.

Twitter Cards

If you are on a CMS that allows you to do this all at once via a plugin, then the level of effort is minimal. It’s just a matter of inputting the information and spot-checking URLs to ensure the data is correct.

Rich Pins

If Open Graph tags were already present on your website, then it would be a matter of making sure the Pinterest required tags for each type were present on the page. You would just need to use the validator tool to activate Rich Pins on one page of your site, and once that is correct, Rich Pins are activated for the entire site. If Open Graph tags are not already present, then placing the correct tags on the correct pages would take a decent amount of time, unless a platform specific plugin is used to accelerate the process.

Importance with SEO & Organic Traffic

Social markup doesn’t have a direct impact on organic traffic. It doesn’t directly boost your organic rankings in the search engines for pages with social markup, but nevertheless, it’s helpful and leads to content discovery, which can ultimately lead to naturally acquired links.

graph

Just like so many other elements of SEO, social markup can have a big impact on click-through rate.

This effort does, however, directly impact social traffic. Having a crafted message for the specific social channel show up when users share links to your website can help gain trust/credibility, which can increase click-through rates to your site.

As a whole, your brand can see more social shares and increased click-through rates, which helps with brand recognition and could cause a boost in all traffic.

Summary

Any efforts you can put in place on your website to help enhance user experience will almost always be worth the time. With eCommerce sites especially, social markup provides a way to ensure your products are being presented to your audience in the best way possible.