I do not engage in professional development of websites, and after reading a few articles on the Web that Joomla automatically provides support of microdata schema "Article", I did not spent time to study this topic. But recently, discovering in the 'Google Developers' some pages of own website I got the picture, which did not add optimism ... The situation was clarified by article "Enabling Rich Snippets for Articles", and review of the code of template Protostar, a standard procedure for the replacement of some its files I'll discuss here. I have no doubt that the Joomla team will offer an elegant support of this and other schemas in future, and this article just about a temporary option for the search engine Google.
The main requirement for the development will be maximum use of setting, which is already provided by Joomla, and get all done in a most simple way. At first we'll look at Google's list of demands to the "Article" schema markup. At the same time, to describe the current state of it support by Joomla's Graphical User Interface (GUI), I will use the next color legend:
- author (Object)
- name (Text)
- headline (Text - title of the article is supported, but has a different name in the program code)
- image (Object)
- url (URL - a reference to a representative picture of article)
- height (Number)
- width (Number)
- publisher (Object)
- name (Text)
- logo (Object)
- url (URL)
- height (Number)
- width (Number)
- datePublished (DateTime)
- mainEntityOfPage (URL)
- dateModified (DateTime)
Let's check out where the above elements supported by the Joomla GUI.
Authorship, title and date of publication and modification determined on the tab 'Publishing' in the dialogue Articles/Edit:
A representative picture of article can be assigned at the tab 'Images and Links':
Name of the publisher and its logo can be assigned in the dialog Template Style Editing:
Add a Simple Replacement
Thus, GUI supports all the necessary parameters, and we do not have to refine it. First, we'll create a replacement of Content appearance. To do this, activate the dialogue 'Extensions/Templates', then select the template and create a replacement of 'Layouts/content':
Note: You may need to override the 'Components/article', which is also marked in red in the figure. At this moment, just remember the location, but do not activate it.
Joomla editor provides quite a complete environment for modifying a template, allowing to edit the required files. Go to the tab 'Edit' and open the file 'block.php'.
Add the following code to the end of the list <dl class="article-info muted"> (right before the closing tag '</dl>'):
In the 61-th row is declared the variable 'gmd_follow_google_recommendations_for images_size', which I assign the value 'true'. Google recommends to apply some boundary to the image's size, defined in lines 83-85. Although I specifically tested the pages with images, the size of which is not consistent with these recommendations and 'Google Developers' did not return an error. Therefore, you may set 'gmd_follow_google_recommendations_for_images_size = false' by own discretion. But since we need an image size in any case, the lines 62-80 intended to calculate them and check the possibility of adding the corresponding microdata elements to the page. Lines 82-93 checks the size of the images and set the final value of the variable 'gmd_add_extended_microdata', which eventually determines whether additional information is displayed on our page.
Now add the following code block immediately after mentioned above, to provide microdata output:
Since all the checks we have carried out, the code is simple to understand. On line 99, we check the state of the variable 'gmd_add_extended_microdata' and allow output if it is set to 'true'. To do this, insert a colon (':') in the code string of the condition. Since Joomla independently controls the output of the visible elements of the page, and we need to support only of microdata that the user should not see, we actively use the tag 'meta'. Now you are ready to re-check our work in the 'Google Developers'.
It is possible that you will receive an error message about the property 'image_fulltext', but its source will be out of our code. In that case, go back to the tab 'Create Overrides' and make it for 'Components/com_content/article'. Next, go back to the tab 'Edit', open file '/html/com_content/article/default.php' of our overrides and find the line, responsible for the 'image_fulltext' output:
Since we have described the properties of that image in the code 'block.php', let's avoid loading of the server with additional calculations and simply remove the piece of code, highlighted in red frame and add substring in green. Recheck your page in Google Developers and hopefully now you will not see the error messages.
This article describes procedure of the standard Joomla template modification, but I think the idea is applicable to other templates. I should add that we could fully automate the process of microdata insert, using for example, the methods of class JImage, allowing resize images on the fly. But, in my opinion SEO should be a meaningful process and site developers need to manually work on the definition and the corresponding design of the pages, considered as relevant to the search engine submission.
Be careful with the module Popular Articles
The following screenshot shows this module on the main page of the site, with a resolution of no more than five items in the list (Joomla version 3.9.2):
The next is Google's Structured Data Test - 5 errors related to popular articles:
For this reason, I have disabled this module.