Connecting a website with social media

SebasWebDev

Social media is a must when it comes to redirecting potential customer/follower to your website, which can result in an increase or your company’s exposure.
For example, a user can post a link to your website in Facebook and at the same time appear in the feeds of all of his friends, and if any of those friends likes the post, the link to your page will also be shown in the feeds of all of the friends of this friend!
A similar case is when someone posts a link to your website in Twitter, and if that user also adds a hashtag the post may also appear in search results of that hashtag to any user.
It is possible also that someone has accounts in different social media platforms, and have them linked to each other, meaning that when a new post is added to Pinterest, it will also be added to Twitter and Facebook feeds. That is an amazing way to increase your website’s exposure!

Pin in Pinterest

Option in Pinterest to post an image also in a Twitter account.


Social media websites offer development tools to be able to customize the information that is shown when someone posts a link to your page.
It is possible to customize the image that is displayed, which is should be configured, otherwise a random image in that page could be shown instead, even if it doesn’t represent the subject of the article nor your company. It is possible also to set the description of the page, the title, among other attributes.
It is important to configure these options correctly to have control over the information that is displayed in a post and represent your company/website in the desired way.

How to configure the information shown in the main social media websites

Facebook

Facebook, as well as other social media platforms like Google + or LinkedIn, use the Open Graph Protocol which with a few lines of HTML tags, your page can become a recognizable element in these platforms: an element with an image, a description, a canonical URL, among other important information.

The required tags are:

  • og:title – The title of the current page;
  • og:type – The type of object this page is. More info about the different types can be found here;
  • og:image – The absolute URL of the image that represent the current page, example: http://tu-sitio.com/imagenes/imagen.jpg. It should be at least 50px x 50px and preferably it should be square.
  • og:url – The canonical URL of the current page. If you add a Like button in the page, when someone likes it, the URL that will show up in the feeds will be the value of the tag og:url.
  • og:site_name – The name of your website in a human readable way, for example: “Sebastian Lopez Design & Development”.
  • fb:admins or fb:app_id – The Facebook ID of the page admin or the ID of a Facebook page. Not sure what your is? Go to this link and click on Statistics of your website, which is the green button on the top-right of the screen. In the popup you’ll find the option to link with your ID or with the ID of any of the pages that you administrate.
  • og:description – The description of the current page. This tag is not required, but I recommend to add it so a short introduction is shown next to the link when this page is shared.

This information has to be added as metatags inside the <head> part of the HTML. Below is an example of how the tags look like:

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        ...
        <meta property="og:title" content="" />
        <meta property="og:type" content="" />
        <meta property="og:url" content="" />
        <meta property="og:image" content="" />
        <meta property="og:site_name" content="" />
        <meta property="fb:admins" content="" />
        <meta property="og:description" content="" />
    </head>

There are additional tags for audio and video that are useful for Facebook’s users to reproduce the multimedia content in their walls.
Facebook has a tool that provides an overview of how your website’s information is displayed in the Open Graph and also helps to detect errors: Debugger. Just add the URL of the page you want to check.

Google +

As mentioned before, Google + detects the Open Graph Protocol metatags as well. The three data that are collected are og:title, og:image and og:description if available. If the description does not exist, it takes the description metatag of the html.

Another way that Google + gets the data or Snippets is through the Schema.org micro-data, which is also used by search engines to filter websites in search results.

This language works by adding additional information in the HTML code. First the attribute itemscope needs to be added to the HTML tag that contains the information (it could be the html tag or any other tag like a div), together with the attribute itemtype that defines the type of element that your section represents. Inside that element the rest of the data needs to be added that should be at least itemprop="name" (equivalent to og:title), itemprop="description" (equivalent to og:description) and itemprop="image" (equivalent to og:image).

The HTML code for a company should look like this:

<html itemscope itemtype="http://schema.org/LocalBusiness">
    <head>         ...
        <meta itemprop="name" content="">
        <meta itemprop="description" content="">
        <meta itemprop="image" content="">
    </head>

It is not necessary to add meta-tags, it is possible to use existing element in the page that contains the information, for example:
<h1 itemprop="name">Name of your company</h1>.
Google offers a tool to create your code and another to test how the data obtained from your website looks like.

Twitter

Twitter has Twitter Cards that, like the Open Graph Protocol, allows you to have more control over the information displayed of your website in a tweet.

They are also configured with meta-tags. Depending of the content of the section, the Twitter Card can be summary (default card), photo (image card) or player (video or audio reproducer card).
The required information is:

  • twitter:card – The type of card.
  • twitter:url – The canonical URL of the page.
  • twitter:title – Title of the card. Up to 70 characters. It is only required for the summary and player cards.
  • twitter:description – The description of the page. Up to 200 characters. It is only required for the summary and player cards.
  • twitter:image – Image that represents the content of the page. Maximum 120px x 120px and minimum 60px x 60px for summary, maximum 435px (width) x 375px (height) and minimum 280px (width) x 150px (height) for photo, and for the player card, the image has to be the same size as the video.

There are additional meta-tags for photo and player, the complete documentation is here.

The code in your HTML should look like this:

<html>
    <head>
        ...
        <meta name="twitter:card" content="summary">
        <meta name="twitter:url" content="">
        <meta name="twitter:title" content="">
        <meta name="twitter:description" content="">
        <meta name="twitter:image" content="">
    </head>
DMOM Twitter Card

Twitter Card example.

Combination of the three meta-tags

I recommend using the Open Graph Protocol meta-tags as they are recognized by the majority of the social media platforms, and if for example Twitter doesn not find the Twitter Cards meta-tags, it will look for the Open Graph Protocol ones. However the meta-tag twitter:card has to be present, because that’s what is going to determine the format of the card.
I also recommend adding the micro-data of Schema.org, which is also indicates to the main search engines like Google, Bing and Yahoo! what kind of content your website has: if it is a company, a person, etc.

The combination of the three would look like this:

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"
itemscope itemtype="http://schema.org/LocalBusiness">
    <head>
        ...
        <meta itemprop="name" content="">
        <meta itemprop="description" content="">
        <meta itemprop="image" content="">
        <meta name="twitter:card" content="summary">
        <meta property="og:title" content="" />
        <meta property="og:type" content="" />
        <meta property="og:url" content="" />
        <meta property="og:image" content="" />
        <meta property="og:site_name" content="" />
        <meta property="fb:admins" content="" />
        <meta property="og:description" content="" />
    </head>

Buttons of the main social media websites

Now that you know how to configure the information to show in the main social media websites, below are link where you can get the buttons for your site so people share it:

For more information, write a comment in below or send an email to info@sebaswebdev.com.