Social Media Tags Guide Part 1 – Statistics and General Information

If we assume that SEO contains all processes related to the visibility of our website, then managing social media tags is without doubt somewhere at the top of our priorities.

Website links that appear on social networks are mostly transformed into so-called “cards” for which the word “business card” would be better suited.

Therefore, based on the assumption that sooner or later our site’s business card will appear on social media, it is worth taking steps to ensure that it does not put off our potential users.
Below you can see the response of the average John Doe who looks at a correctly prepared business card:

And what if you think that your site does not need such elements because you do not use Facebook, because you do not see such a need?

Then, despite our misgivings, it is worth remembering that even if we do not dedicate our site a special profile page on social media, it can still be transferred in private conversations between users. As a result, if the appearance of the site’s card is not appropriate, it may deter people (which could be our potential customers and/or recipients). As confirmation – a photo showing the typical facial expression of an average John Doe who saw a poor business card on Facebook:

But let’s get to the point…

Read also: SEO Foundations

What comprises a social media business card?

Although the final appearance of the business card will actually depend on the particular site on which it appears, in most cases the business cards will contain basic information about the page, i.e.

1. The title of the shared page (tag og:title)
2. A description of the shared page (tag og:description)
3. The name of the shared page (tag og:site_name)
4. An image of the shared page (tag og:image)

This information, for example on Facebook, is presented as follows:

So what are ‘OG’ and ‘Twitter’ all about?

Both of these names refer to the meta attributes added to the source of the web page.

These tags take the following form:
`<meta property=„og:title” content=„Site Title” />`

(where the bold text is the attribute which tells us what we want to specify, and the underlined text tells us what the content on the business card should be).

OG stands for Open Graph, a protocol which is created by Facebook. It is designed to be a standard for managing cards generated on social networks and allows us to define ‘once and for all’ tags for all social media.

For this management to be possible, the protocol provides us with a dozen or so dedicated ‘meta’ tags (more on this topic later in another part of the article).

Twitter, as the only social website besides using OG tags, also uses dedicated ‘Twitter’ tags (more on this topic later in next part of the article), these twitter tags take the following form when placed inside a side’s head:

<meta property=„twitter:title” content=„Site Title” />

Before we move on to more technical stuff, let’s talk about statistics.

What is the reach of social networks?

Statistical data allows us to understand a little better both the scale of the reach of social media sites as well as where we can expect our site’s business card to appear.

In Poland (for January 2019):

• 47 percent of the population (18M people) actively use a social media websites
• The average daily amount of time spent on social media is almost two hours
• The most used social medium is YouTube, closely followed by Facebook

We should bear in mind the following when considering the data above:

1. The presented data applies to Poland; other countries may have other social media sites that use similar or different OG tags. To have full information about where a business card may appear, use statistics relevant to your audience.
2. Things vary; For some site owners, social networking sites such as LinkedIn may not be as important as for others. Fortunately, thanks to the fact that OG tags are standard, all we have to do is to set up our site properly the first time around, and we should have all of the potential problems off our chests.

How is a social media business card created?

When a new site is created, it is initially not saved by social media in any way. In other words, a business card for this site does not yet exist.

This changes when:

• A link to our site appears (it is typed or pasted) on social media in a given place (in chat, on a wall etc.)
• Someone uses a page dedicated to creating/checking cards, a so-called ‘debugger’ page (we will discuss those pages in more detail in another part of the article)

When one of the two situations mentioned above occurs, social media (such as Facebook) will use a so-called ‘crawler’, which we can think of as a page content scanner. The information found by the crawler will be presented on our business card.

The first thing that the crawler does is searching for OG tags, and if they exist, they will be placed directly into the presentation of our card without scanning the content of the site further.

What if a site does not have meta tags?

If our site doesn’t have OG tags present, the crawler will try to find the right data to describe the given page by searching all its content.

This search is done heuristically.

What does heuristically actually mean?

It means that the crawler will take some data that IT finds appropriate and display it on our business card. In practice, this means that our business card may be a cluster of random information.

For example: suppose we are on the “dsblog.com” page and read the article entitled “Burger or pizza?” Here is a visual representation of the site:

The site has no OG tags managing it – so what will the card look like?

The following steps will be taken by the crawler:

1. No ‘og:title’ tag present – the crawler will try to find the name of the page.

In this case, first up will probably be the title of the page. If the site has a well-prepared structure, it will most likely be “Burger or pizza?”, Which means that the name of the site will most likely be correct.

If the site’s structure is not so well-prepared, it is likely that the page title will be assumed to be ‘Burger’, which doesn’t exactly convey the idea of the article ¯\_(ツ)_/¯.

2. No og:description tag present – the crawler will try to find a description for the page it is on.

Most likely, the description of our site will use the first text visible on the page, which is long enough to give the impression of a description.

In the case of our example page, you will probably end up with a short summary of a burger as the page description.

3. No og:site_name tag present – the crawler establishes the name of our page.

Here, as long as there are no strange things happening in the structure of the page, there will most likely be no problems and the crawler will use the address shown by the page (DSBlog).

4. No og:image tag present – the crawler checks if it can use an image for our site.

Here again, a problem arises because the crawler might use an image to describe the content of our page that is completely different from the actual meaning of the article.

Most likely, the burger image will be used, because in our example it has dimensions closest to 1:1 (giving the impression of being an image that matches the business card).

It’s easy to notice a certain pattern here – everything will happen … likely (probably).

Therefore, we are guided by chance, which in the situation of dealing with the image of our company or ourselves, can be unpleasant and downright dangerous.

Possible effect:

Image – of the author
Title – of one of the article sections
Description – from a different section to the title

So in the end according to the card, the author of the entry is a burger and both are great, but which is better?

Setting tags directly in the page source protects us from exactly such situations of generating a random business card, so it is always worth having at least base tags.

On which sites will OG tags be visible?

Considering the earlier graph of statistics on Poland, we can assume that we want the card to be presented correctly on every one of those sites. So first we’ll find out where, in reality, such a card will be created:

• YouTube – no OG tags are used, links look like ordinary links (blue underlined text).
  
• Facebook – uses OG tags
  
• Facebook Messenger – uses OG tags
  
• Instagram – uses OG tags but only in the application; the desktop page does not use OG tags.
  Desktop:
  
  Mobile APP:
  
• Skype – uses OG tags
  
• WhatsApp – uses OG tags
  
• Twitter – uses dedicated Twitter tags; if they are missing, OG tags are used as replacements
  
• Snapchat – does not use OG tags
  
• LinkedIn – uses OG tags
  
• NK.PL – does not use OG tags
• Pinterest – does not use OG tags, but dedicated for images and articles
• Twitch – does not use OG tags, links look like ordinary links (blue underlined text)
• Viber – uses OG tags
• Reddit – uses OG tags

Base meta tags (tags that each and every page should have)

Before we implement the tags, we should remember two things:

• The content of the tags should represent the content of a given page, not the other way around.
• (If the site is bigger) We should prepare our site so that it automatically creates tags from the content or the content creators can easily provide those themselves.
  or
  (If the site is smaller) Tags can be provided for each page manually (due to ease of control).

The tags we will describe in this section should always be present in every site. They’re directly visible on most social media business cards, so making sure their content is correct is important.

Where should tags be added?

Tags should be added to the <head> section of your website’s HTML document – the sooner they appear on the sites source code the better (crawlers have a limitation on the amount of content they scan before giving up and using heuristic data)

og:title

Preferred value: The title of the article or page, without the name of the page itself [String]
Example tag:

<meta property=„og:title” content=„Burger vs Pizza” />

Use: To give the page the right title on the business card
Additional information: For this tag it is recommended to remove any suffixes and prefixes, a common procedure on various sites

(Some pages have their own name in the title, e.g. “Burger vs Pizza – DSBlog.”
Due to the fact that the page name (DSBlog) is presented separately on social media business cards, it is recommended to eliminate it in the “og: title” tag)

og:type

Preferred value: website (for most ordinary pages)
Example tag:

<meta property=„og:type” content=„website” />

Use: We use the tag to provide social networks with information about what type of content they should display.
Additional information:

• This value should be appropriate to the content of the site, although setting a value other than ‘Website’ will not bring greater benefits to our business card (more on this in the optional tags section og:type in part 2).
• Setting values other than the default one gives access to additional parameters, e.g. when the value is set to “article” we get access to the “article:author” parameter, which defines the author of a given article.
• Considering the fact that there’s no real benefit in setting the value of this tag to something else than “website”, other options won’t be provided in this article (More information about that will be provided in another part of the article though, so we can truly understand the purpose and usage of that tag).

og:url

Preferred value: Normal website address (canonical) with no additional parameters [Absolute URL]
Example tag:

<meta property=„og:url” content=„https://artegence.com/blog/seo-foundations/„ />

Use: This tag is used to ensure that ‘traffic’ to a particular page is gathered in one place, so that all likes and shares are deposited for one specific link
Additional information:

We should use og:url especially when on our site we can use two different URLs for the same page (and none of them is redirected), the “og:url” tag set on both of them directing to one specific address will prevent the example situation:

Let’s assume that our DSBlog article has pages (which would make reading easier). If, after changing the page, a query appears in the address, it means that there are, for example, two physical addresses for users:

`https://dsblog.com/burger-vs-pizza?page=1`
and
`https://dsblog.com/burger-vs-pizza?page=2`

When external users read the article, depending on the page they are on, they will be able to share two different links that, without the og:url tag, will be treated separately on social media which will result in the following:

• A shared page (…)?page=1 will have 200 likes
• A shared page (…)?page=2 will have 50 likes

However, preferable would be having one page with 250 combined likes, not separated.

Other options include, for example, having mobile websites:

`https://dsblog.com/burger-vs-pizza`
as well as
`https://m.dsblog.com/burger-vs-pizza`

or for example interpreting one address with different endings
`https://dsblog.com/burger-vs-pizza`
`https://dsblog.com/burger-vs-pizza.html`
`https://dsblog.com/burger-vs-pizza/`
etc.

og:description

Preferred value: a description of the page content
Example tag:

<meta property=„og:description” content=„The ultimate battle of burger and pizza, which one will be superior?” />

Use: this tag manages the page description visible on the business card

Additional information:

• This tag is defined as optional in the OG specification. However, considering its direct impact on the appearance of a large part of the business cards generated on social media, it is always worth using it.
• The tag is presented in various lengths; it is worth ensuring that the description consists of one or two sentences.

og:image

Preferred value: An absolute path directing to an image
Example tag:

<meta property=„og:image” content=„https://dsblog.com/images/burgervspizza_og.jpg” />

Use: we use the tag to ensure that the business card displays specified images
Additional information: Warning! An absolute path must be used for the image. Tags such as:

<meta property=„og:image” content=„//images/burgervspizza_og.jpg” />

<meta property=„og:image” content=„dsblog.com/images/burgervspizza_og.jpg” />

will block the image download – both from the OG tag and from the content of the page.

• Setting up the perfect photo requires proper preparation (we prepared a separate article for that)
• The image, being the largest element of the business card, naturally attracts the most attention. Therefore, it is worth ensuring that there is at least one main picture (even a generic one) on the entire site (pages and subpages).

Summary

Thanks to the appropriate tag settings listed in the base tags section, our website should be prevented from appearing in an inappropriate manner on social media sites.

If you want to know more about OG tags or have problems with their implementation, please read the next parts of this material on social media.

We will discuss:

• how to create an ideal image for your social media business card
• how to use debugging sites to verify OG tags
• whether it is worth using additional OG tags
• all known OG tags which can be used on a webpage
• which tags are used by Twitter and why they are not in the OG standard

Stay tuned…

Read also: Why are we still implementing web analytics from the source code level?