Use of MetaTags

Missed the general description of this software? Check it here
(Software version: J 1.0)

This little and smart plugin will allow you to place custom meta tags (Twitter/ Facebook/ Google and all others) inside the output of any menu item, it just extends the menu item with a simple tab.

What are Meta Tags?

If a visitor shares an article from your website on social platforms it mostly will show something like below. 90% Of the cases the social system pulls the correct (or first) image of your article along with the title and a summary.

To go a bit more in depth let me show you a detailed example of a Twitter share:

Now a website mostly offers different types of information which can be shared again trough all different kind of channels:

  • Twitter Cards: Summaries, Images, Galleries, Apps, Video, Audio, and Products
  • Pinterest Rich Pins: Products, Recipes, Movies, and Articles
  • Google+: Articles, Blog, Book, Event, Local Business, Organization, Person, Product, and Reviews
  • Facebook: Articles, Photos, Audio, Video, and more

There are great extensions on the market which automate the above proces for your website for all articles and content items.

Now comes the trouble…

When you have a Joomla menu item pointing to a component entry point, blogview or listview of articles or a page with only modules there are many titles, introtexts and images on that page. The social share  system will not know which one to use to describe the contents of that page. Here the plugin comes in!

Example meta tags

By adding custom meta tags you can feed the social engines what type of information to use to display when sharing. Be aware that every social channel needs it’s own tags. I will show you some example channels where i set tags for a Joomla category blog view menu item:

Example Tags for Facebook

Facebook uses Open Graph meta data.

<!– Open Graph data –>
<meta property=”og:title” content=”Category title” />
<meta property=”og:type” content=”blog” />
<meta property=”og:url” content=”http://www.example.com/blog/” />
<meta property=”og:image” content=”http://www.example.com/images/general-blog-image.jpg” />
<meta property=”og:description” content=”Summary, i.e. Several great articles about metatags and blogs ” />
<meta property=”og:site_name” content=”Site Name, i.e. JoomAPP” />
<meta property=”fb:admins” content=”Facebook numeric ID” />

Example tags for Twitter

Twitter uses ‘Twitter card’ tags*

<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@publisher_handle“>
<meta name=”twitter:title” content=”Page Title“>
<meta name=”twitter:description” content=”Page description less than 200 characters“>
<meta name=”twitter:creator” content=”@author_handle“>
<– Twitter Summary card images must be at least 120x120px –>
<meta name=”twitter:image” content=”http://www.example.com/image.jpg“>

Example tags for Google+

<!– Schema.org markup for Google+ –>
<meta itemprop=”name” content=”The name or category here“>
<meta itemprop=”description” content=”This is the category description“>
<meta itemprop=”image” content=”http://www.example.com/image.jpg“>

The importance of Open Graph data

If you could choose only one type of meta data to include, your best bet is Open Graph. All of the platforms can use it as a fallback, including Twitter to a large degree.

Images; because size does matter

It probably would have been be too easy if all platforms are using the same image size. Unfortunately it’s not. If you want to do it properly you will have to create a separate image for every social channel according their specs. The below links will help you with that.

Tools for testing and approval

A. Twitter Validation Tool

https://dev.twitter.com/docs/cards/validation/validator

Before your cards show on Twitter, you must first have your domain approved. Fortunately, it’s a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the “Submit for Approval” button.

B. Facebook Debugger

https://developers.facebook.com/tools/debug

You don’t need prior approval for your meta information to show on Facebook, but the debugging tool they offer gives you a wealth of information about all your tags and can also analyze your Twitter tags.

C. Google Structured Data Testing Tool

http://www.google.com/webmasters/tools/richsnippets

Webmasters traditionally use the structured data testing tool to test authorship markup and preview how snippets will appear in search results, but you can also use see what other types of meta data Google is able to extract from each page.

Was this article helpful to you? Yes No