[SEO] How to Add Microdata to Articles in Joomla 3
Microdata makes it possible to search engines to understand important details about your site's content. Microdata provides Google and Bing with extra information about your content such as names, descriptions, dates and ratings. And, because search engines can understand your data more clearly, they often reward you with a higher ranking.
In Joomla, microdata support was quietly added in Joomla 3.3 which was released in April 2014. The best to way to provide microdata is by using your template.
Some templates provide microdata support, but many do not. If your template was released before April 2014, it probably doesn't support microdata and will need to be updated.
I'm going to show you how to test your template and then add microdata if needed.
Step #1. Check if your template uses microdata
First, let's check to see if your template is using microdata for articles.
- Go to this URL.
- Paste in the URL of one of your site's articles.
- Click the "Fetch Validate" button.
On the right side of your screen, you're looking for results like these:
This image shows a template that does use metadata correctly:
If you see an image like the one below, your template is using metadata, but has errors. Check with your template provider for a fix.
If you don't see any results like these, your template doesn't use metadata. Keep reading this tutorial to know how to add it.
Step #2. Set schema
We're going to use the schema for articles from http://schema.org/Article
The way to add microdata to Joomla is by using template overrides. We need to create a template override for single articles.
- Edit or create the template override for single articles.
- Open the file located in: templates/yourtemplate/html/com_content/article/default.php
- Look for the div that works as container for the article. This will often have a name like this "main-container".
- Add itemscope itemtype="http://schema.org/Article" into the div, like this:
<div id="main-container" itemscope itemtype="http://schema.org/Article"> … </div>
Step #3. Add article markup properties
Now we're going to continue editing the default.php file. Look carefully inside the file to see where to add support for each property. For example, we're going to add itemprop="name" to the article title and we're going to add itemprop="datePublished" to the publication date.
<meta itemprop="inLanguage" content="en-GB" />
<h2 itemprop="name">Article title</h2>
<a href="/article/url/" itemprop="url">Article title</a>
<a href="/category/url/" itemprop="genre">Category title</a>
<time datetime="2015-09-06T00:26:57-05:00" itemprop="datePublished">Published: 06 August 2015</time>
<div itemprop="articleBody">Article full text.</div>
<span itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Author name</span> </span>
<h2 itemprop="headline">Article headline</h2>
<img itemprop="image" src="/path/to/image.jpg" alt="alternative text"/>
Step #4. Test end result
Go back to Step #1 and test your site again. Hopefully Google's test now shows that your microdata is working correctly.
Leave a comment
Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.