Social meta tags to improve viralization

Did you notice that when we include a link from our site on Facebook, sometimes an image loads, but other times we just see a poor box with text? This happens because Facebook tries to read the meta-tags of your content… without success. Don't worry, it is common for a site's meta-tags to be misused, and that is the excellent reason for this note.

Let's remember: meta-tags are "hidden" lines of code in the html of our site. Of course, they can be searched in the html by pressing Ctrl+U from our favorite browser, and, if they exist, you will find the metas in the header code (that is, from the call ). They are not displayed in the online content of a site, but they are.

Using meta-tags not only continues, in 2020, to help our content rank better for its specific topic, but also promotes its dissemination within social networks. The meta-tags allow us to define both the images and the descriptions of our content, very useful when we ourselves or —preferably— a reader shares our post on Facebook, Pinterest or Twitter.

Knowing exactly which Meta Tags to include can be confusing, even for an experienced webmaster. Therefore, in this note we are going to introduce you the social meta-tags that should not be missing in your content, and we will review the free tools that you can use to take advantage of them with ease.

Shall we start?

OpenGraph

The only meaning that Open Graph Meta Tags is precisely to facilitate the integration between a shared address of our site and a social network.

OpenGraph is recognized by its property og:x, and inside the section should look like this:

Pertinent note: og:type used to define the type of content. If you use “article” as in the example, it is the generic to refer to posts and pages, but the possibilities involve “sport”, “bar”, “company”, “restaurant”, “book” and many others. If your site responds to a very particular activity (eg non-profit), we recommend placing the specific type that responds to it.

Preview on Facebook

A native Facebook tool, online and of course free, will allow you to both preview the code and find errors, if any. This tool is called a debugger, and you will find it here.

For the rest, it may be useful to complement this information with the shared content best practices guide on the Facebook page.

Twitter Cards

With respect to Twitter Cards, we can say that it works identically, but they only serve to share on Twitter. No other social network will look for this code on our site, nor will it do you any good. But, as we said, preparing for our content to be shared on the birdie's network, we must include it.

Twitter Cards meta-tags look like this on your :

As with Facebook, Twitter also provides its own online validation tool to check the health of our meta-tag code. At this address you will find the Twitter Card Validator.

Both the Open Graph and Twitter Cards meta-tags read as follows when using code view in your preferred web browser (Ctrl+U).

Now, although both meta-tags can be interpreted in different ways (Facebook -Open Graph- calls our content “object”), logically they are expected to be reciprocal between them.

Perhaps the following table will help us think about the content of our most basic tags:

pinterest

Rich Pins, that is, “rich pins” show the content of our meta-data directly in the shared Pin. The interesting thing is that this information is linked and complements the rest of the Pin as additional content. Again, adding meta-data to our Pinterest site will encourage the viralization of our content and the media responses of those who share or enter our site through (and thanks to) their recommendation on the networks.

There are 4 types of Rich Pins and they are apps, articles, product Y recipe.

Once you've requested Rich Pins on your Instagram account, any content on your site that contains the proper metadata will become a Rich Pin when a user saves it to their board.

Setting up Rich Pins for your Page

Setting up Rich Pins is a two-step process: First, you need to add the metadata to your site's content. To understand which are the best for each type of Pin, we recommend you consult the Pinterest guides according to your case: articles, products Y prescriptions.

The good news is that if you're already using Open Graph, which we covered at the beginning of the note, you'll find that rather than reviewing the behavior of your Rich Pin-enabled article with the Pinterest debugger tool, you do not have to do anything. The operation of your Open Graph meta-data is already suitable to take advantage of the benefits that Pinterest offers you when someone shares/pins your content.

Just like Facebook allows with its own tool, the Instagram debugger tool will allow you to check the validity of your meta-data; If everything is correct, you will be able to select one of three options to indicate how your pages have been marked up: HTML tags (if you're using Open Graph or Schema.org metadata), oEmbed (if you used the oEmbed format), or Shopify (if you own a Shopify store). By clicking on the “apply” button you can make the changes.

Warning: you only need to validate a single URL to request Rich Pins across your entire site (you don't need to submit all your URLs).

As we can see, if you had to choose a single data type to include, your best bet is Open Graph, since any platform can resort to its code as an alternative when specific goals of a particular social network are not found (or do not exist).

Adding or editing my meta-tags with plugins in Wordpress

To solve the inclusion of meta-tags on your Wordpress site, without a doubt the best option is to resort to specialized SEO plugins. Therefore, we recommend the one that we believe is the best: The SEO Framework.

The SEO Framework was clean and effective for us; For this, we have added its professional version to our plan Managed WordPress.

In fact, we already did a comprehensive note on The SEO Framework detailing its tools and SEO benefits so that you can conquer the heart of Google definitively. This plugin will allow you to perform and manage your goals in an intuitive, easy and intelligent way, but, nevertheless, if you are a thorough dev and you prefer to add the code of your meta-tags in the head of your pages and/or posts manually, we will also explain how to achieve it. We do not want to overlook this alternative, although it is not recommended for large sites or blogs.

I prefer to add the html code of my meta-tags manually

As we said, there is the possibility of adding the meta tag code manually for each post or page, but, once again, we will need a plugin that allows us to write inside the section … of the HTML in question.

Adding HTML code to our meta can be useful when we don't want to generate unnecessary code for all our content; on small sites, with few sections, where keeping track of our SEO is much easier, the scenario to compose "by hand" the goals of our interest can be propitious.

For this, if you are not now using a plugin to write within the area of your , we recommend the following plugin: Head&Footer code.

Of course, it's free. Once installed, entering any page or post and scrolling down, you will see the field you need:

Bonus: The Product Template

Product markers are popular among merchants, and are often easy for developers to implement via shopping cart software (eg WooCommerce). This template differs from article bookmarks in a few details:

Below we can see the basic meta code for both Open Graph and Twitter

<!-- Update your html tag to include the itemscope and itemtype attributes. --> <html itemscope itemtype="http://schema.org/Product">

<!-- Coloca esto entre las etiquetas <head> de tu sitio -->
<title>Page title, between 60-70 characters</title>
<meta name="description" content="Description of the page no longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="producto">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description of the page no less than 200 characters"> <meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content=" http://www.ejemplo.com/imagen.html">
<meta name="twitter:data1" content="$3"> <meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="title here" /> <meta property="og:type" content="article" />
<meta property="og:url" content="http://www.ejemplo.com/" />
<meta property="og:image" content=" http://ejemplo.com/imagen.jpg" />
<meta property="og:description" content="DescriptionHere" />
<meta property="og:site_name" content="Site Name, ie Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />

Let's think that, in a shopping cart of any online store, there are tens, hundreds or perhaps thousands of different products. Therefore, trying to manually generate goals for each item would not only be difficult to achieve, but rather impractical. But don't worry, since the SEO plugin that we recommended at the beginning of the note, Rank Math, will do the work for you.

Image optimization

The image you link in your social data does not necessarily have to be visible in the content of your page. However, it must visually represent the content of the text with reciprocity. That image will be the face that users will see when they share your content, so it is important to use both high-quality and rhetorically/visually effective images.

Remember: a picture is worth a thousand words.

In the table that we published more at the beginning of the note, where we compare Open Graph and Twitter Cards, we have already mentioned the minimum and recommended sizes for each social network.

summarizing

We have tried to cover as many aspects related to the meta code for social tags, but doubts or queries can always arise. We are here to help you. Do not hesitate to write us in the comments raising your own questions. Remember: a plugin that will facilitate all this work is Math Rank, so if you want a global (and free) solution that covers all social networks and resolves issues inherent to online stores, don't complicate your life.

Remember to use the online testing tools of each social network: facebook debugger, twitter debugger, pinterest debugger. If there is any problem or omission in the html code of your social meta-tags, these tools will point it out, providing the necessary information to correct any problem.

Our greetings, and thanks for reading.