среда, 24 февраля 2016 г.

Practical use of Microdata in Joomla! 3 and 2.5

  •  
With the latest updates in Joomla 3, many improvements have been introduced regarding Microdata (sometimes also called Rich Snippets or Structured Data). Some recent articles in the Community Magazine already explained the technical backgrounds of the implementation and the workflow for developers. However, many still struggle to understand where they can see this and how they can benefit from the SEO advantages that microdata give on a practical level.
Microdata in webmaster toolsMicrodata in webmaster tools
Let’s first look at the current status of Joomla! 3.3. Before this, in Joomla 3.2 the JMicrodata library has been introduced, which allowed developers to implement microdata in the HTML output of their extensions. Then in Joomla 3.3 microdata actually found their way in the Joomla core output. At this time, this is limited to the output of the articles (com_content) and the contact persons (com_contact). The microdata syntax is hardcoded in the HTML, and there are no ways to configure this in either Global Configuration or on a article or menu level (probably switches will become available to toggle this on or off later).
This means that if your Joomla website just uses clean, unmodified core output (like in the core templates, e.g Protostar), microdata syntax will be shown in articles and contact-persons.
A sample output from an article is the following:
<div class="item-page" itemtype="http://schema.org/Article" itemscope="">
  <div class="page-header">Article heading here....</div>
  <dd class="createdby" itemtype="http://schema.org/Person" itemscope="" itemprop="author">Author here...</dd>
  <div class="content_rating" itemtype="http://schema.org/AggregateRating" itemscope="" itemprop="aggregateRating">Rating here...</div>
  <span itemprop="articleBody">Article body text here....</span>
<div>
This includes stuff like article rating, which will display in Google search results, like in this example:
voting-microdata
Also, if you monitor your site in a Google Webmaster Tools account, you will found that underSearch Appearance >> Structured Data the new markup is discovered, as you can see in the main image of this article.
As you can see, Google recognizes that your content is now structured as an Article of the Blog category (Probably more options will become available in future, like Review or Recipe).

Microdata does not show up?

Now on many sites, you will fail to find microdata. Most likely this is because your template uses template overrides. Just check the folder for your template to see if it contains overrides in the following location:
templates\YOUR_TEMPLATE\html\com_content\article\default.php
Probably the default.php file then still uses the PHP code as it was before Joomla 3.3.  If this is the case, it will contain the ‘old’ code to be outputted. If you created the override yourself, the solution is to recreate it from the updated core (in this case components\com_content\views\article\tmpl\default.php), and then reapply the changes in the override. For example, I sometimes just create an override to change H2 article headings into H1. By recreating my override, the microdata appeared.
However if you use commercial templates, these overrides may be too complicated, and you will have to wait for the template providers to update. Most providers will probably be very busy now, so watch out for their updates. If your provider does not provide updates, or if your subscription is expired I’m afraid you’re a bit stuck...

The future for microdata in Joomla

There are many more locations where it would be nice to have microdata. One example is the breadcrumbs module. With microdata enabled the breadcrumb path will be shown in the Google search results. As this is actually quite simple to implement I would not be surprised if it would appear in Joomla very soon, but you can also achieve this with a simple override, or a plugin.
Most probably there will be many more options and possibilities in the near future. This earlier article in the Community Magazine may show something for the future.

I need microdata now

If you cannot wait for Joomla to offer microdata in the core, or if you are simply still on Joomla! 2.5, you can still make use of microdata:
  1. Create template overrides
  2. Install plugins
  3. Use JCE to include them in your articles
  4. Just type them straight in your article
Let’s check these possibilities one at a time.
1. Template overrides
Sometimes you can use template overrides to include microdata. It requires you to look up the exact code that is needed and then incorporate this in your template’s html folder. The breadcrumbs module is probably the easiest location to do so, check out this tutorial on how to achieve this.
Similarly, you can attempt to try this for other modules or core components as well.
2. Install plugins
An easier solution is probably to check the JED for extensions. There are already dozens of plugins for microdata inclusion. They are easy to use and offer lots of functionality. Some nice examples available for breadcrumbs and the voting system, and there are plenty more.
3. Use JCE
Many of you will use JCE as your editor, and what many will not know is that there is a microdata plugin that you can install into JCE, which helps you to create microdata formatted content. It allows you to use a WYSIWIG template to enter microdata of any kind avilable, and it’s really simple to use, as this tutorial will show you.
4. Just type it into your editor
Once you start studying the code, you will quickly see the logic behind microdata, and nothing has to stop you from actually typing it straight into your HTML, or use a sample bit of code. One particular piece of code that I often use is the code for an address. I often include this in a custom HTML module in a footer location. Just use this code as a sample:
<div itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="name">Your business here</span><br>
  <span itemprop="streetAddress">Your address here</span><br>
  <span itemprop="addressLocality">Your city here</span>,
  <span itemprop="addressRegion">Your State here</span>
  <span itemprop="postalCode">Your postal code here</span><br>
  <span itemprop="addressCountry">Your country here</span>
</div>
Also you can generate your code using a generator like this one:www.feedthebot.com/tools/address
With all these solutions, keep a close eye on the latest developments. Your own overrides or installed plugins may become superfluous once Joomla offers full Microdata support.






Microdata

Материал из Joomla! Documentation


4
Другие языки:
English • ‎español • ‎français • ‎Nederlands
Quill icon.png
Content is Incomplete
This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or sectionhas not been edited in several days, please consider helping complete the content.
This article was last edited by MATsxm (talkcontribs) 8 months ago. (Purge)
Joomla! 
 
≥ 3.2

What is Microdata?

Microdata is a way of adding contextual information to your website and its contents, allowing search engines to better understand the information you provide them with.
Contextual information allows search engines to understand the meaning of the information presented on your website, which allows it to better answer more verbose 'natural language' queries where an understanding of the meaning helps to interpret the most relevant content to be displayed.
Microdata can be used to explain just about anything you would ever want to explain, and there are more 'schemas' being added on a regular basis. There are several vocabularies in existence, however at present the system favoured by search engines is that of schema.org.
To understand how search engines use the microdata information take a look at this short video.

Joomla! 3.x roadmap for Microdata

The 3.2 release introduced the JMicrodata library, part of one of the many successful projects submitted during GSoC 2013 and the 3.3 release introduced microdata elements into two of the core component’s layouts. For 3.4, we aim to continue refining the JMicrodata library to ensure it is flexible and easy to use for users of all skill levels and continue implementing microdata elements into core layouts.

How do I use Microdata?

Microdata can be added to Joomla! using template overrides or with the use of plugins which allow you to insert microdata into specific resources.
As of Joomla! Joomla 3.2 there is a library within Joomla! which allows developers to pull in microdata without needing to format it correctly.

JMicrodata

JMicrodata is a library to implement and output http://schema.org microdata semantics.

The library was designed with this goals in mind:
  1. Having the possibility to switch the Microdata Type dynamically, you just change the Type (there are 558 different available types).
  2. Display validated semantics, the library takes care to display data correctly.
  3. Enable/disable the microdata semantics.
  4. Fallbacks, you should never lose any meaningful semantic.
The JMicrodata class uses the types.json file which contains all available http://schema.org Types and Properties, that file was automatically created with thehttps://github.com/PAlexcom/Spider4Schema web crawler.

How do I use the JMicrodata library?

First of all you need to make an instance of the library in your extensions:
<?php
$microdata = new JMicrodata('Article');
?>
So let's suppose that you have the following string which is part of your article:
<div>
    <!-- Author of the content -->
    <span>
        Written by Alexandru Pruteanu
    </span>
    <!-- The content -->
    Here is the article text...
<div>
And you want to add microdata semantics and you setup the current scope type as Article:
<?php
$microdata = new JMicrodata('Article');
?>
 
<div <?php echo $microdata->displayScope();?>>
    <!-- Author of the content -->
    <span>
        Written by <?php echo $microdata->content('Alexandru Pruteanu')->property('author')->fallback('Person', 'name')->display();?>
    </span>
    <!-- The content -->
    <?php echo $microdata->content('Here is the article text...')->property('articleBody')->display();?>
<div>
The library will display:
<div itemscope itemtype='https://schema.org/Article'>
    <!-- Author of the content -->
    <span>
        Written by
        <span itemprop='author' itemscope itemtype='https://schema.org/Person'>
            <span itemprop='name'>Alexandru Pruteanu</span>
        </span>
    </span>
    <!-- The content -->
    <span itemprop='articleBody'>Here is the article text...</span>
<div>
What happens if the current scope is something else than Article, for example a Product scope, and the current scope doesn't have an author and articleBody property?
<?php
$microdata = new JMicrodata('Product');
?>
 
<div <?php echo $microdata->displayScope();?>>
    <!-- Author of the content -->
    <span>
        Written by <?php echo $microdata->content('Alexandru Pruteanu')->property('author')->fallback('Person', 'name')->display();?>
    </span>
    <!-- The content -->
    <?php echo $microdata->content('Here is the article text...')->property('articleBody')->display();?>
<div>
As you've added a fallback ->fallback('Person', 'name'), it will fallback to the Person type, and you will not lose any meaningful semantic.
<div itemscope itemtype='https://schema.org/Product'>
    <!-- Author of the content -->
    <span>
        Written by
        <span itemscope itemtype='https://schema.org/Person'>
            <span itemprop='name'>Alexandru Pruteanu</span>
        </span>
    </span>
    <!-- The content -->
    Here is the article text...
<div>
If you don't need all that microdata information, you just disable that feature by calling: $microdata->enable(false);
<?php
$microdata = new JMicrodata('Product');
$microdata->enable(false);
?>
 
<div <?php echo $microdata->displayScope();?>>
    <!-- Author of the content -->
    <span>
        Written by <?php echo $microdata->content('Alexandru Pruteanu')->property('author')->fallback('Person', 'name')->display();?>
    </span>
    <!-- The content -->
    <?php echo $microdata->content('Here is the article text...')->property('articleBody')->display();?>
<div>
The library will display the following:
<div>
    <!-- Author of the content -->
    <span>
        Written by Alexandru Pruteanu
    </span>
    <!-- The content -->
    Here is the article text...
<div>

JMicrodata documentation

All Microdata HTML output is handled by the JMicrodata class.

JMicrodata::htmlScope($scope);
Return:
itemscope itemtype="http://schema.org/$scope"
the HTML Scope of the given Type, must be inside a HTML tag element.

JMicrodata::htmlProperty($property);
Return:
itemprop="$property"
the HTML of the given Property, must be inside a HTML tag element.

JMicrodata::htmlSpan($content, $property = "", $scope = "", $inverse = false);
Return:
<span itemscope itemtype="http://schema.org/$scope itemprop="$property">
    $content
</span>
the microdata in a tag, there is also available a JMicrodata::htmlDiv() method with the same functionalities.

JMicrodata::htmlMeta($content, $property, $scope = "", $inverse = false);
Return:
<meta $property $scope content="$content">
the microdata in a <meta> tag with the content for machines, this method does not add the meta tag in the <head> section of the page.

$microdata = JMicrodata($type = "", $flag = true);
Create a new instance of the JMicrodata class and setup the current Type, the flag param is for enabling or disabling HTML microdata semantics output. Fallback to ThingType if the Type isn't available or given.

$microdata->enable($flag = true);
Enable or Disable HTML Microdata semantics output.

$microdata->isEnabled();
Return true if Microdata semantics HTML output are enabled.

$microdata->setType($type);
Set a new Schema.org Type, there is also a $microdata->getType() function to retrieve the current Type.

$microdata->property($name);
Setup the Property if available in the current Type Scope, there is also a $microdata->getProperty() function to retrieve the current Property.

$microdata->content($value, $machineValue = null);
Setup a Text value or Content value for the Microdata, there is also a $microdata->getContent() function to retrieve the current Text value.

$microdata->fallback($type, $property);
Setup a Fallback Type and Property, there are also the $microdata->getFallbackType() and $microdata->getFallbackProperty() to retrieve the Fallback Type and FallbackProperty. Fallback to Thing Type if the Type isn't available, Fallback to null the Property if isn't available.

$microdata->displayScope();
Return:
itemscope itemtype="http://schema.org/$scope
the HTML with the Scope of the current Type, must be inserted inside a tag element.
$microdata->display($displayType = "", $emptyOutput = false); Return the Microdata HTML, if the Property isn't available it checks for a Fallback, otherwise return .
There are 4 types of $displayType:
  • inline
  • span
  • html
  • meta
This method contains the HTML Microdata display logic, If you specify the $displayType param, the Microdata will be returned the way you specified and expect — to, Otherwise if the $displayType param is empty it will be processed by the display() method and returned the HTML in the right way, with the expected Property Type (example of expectedTypes = URL, Text, Person ...)
— What happens if you call display($displayType = "meta") ?
The returned HTML will be inside a <meta> HTML tag.
— What happend if you call display()?
The method will automatically check the expected type for the given Property, and will return the right Microdata HTML.
There are 3 types of Microdata:
  • nested → example:
itemprop="$property" itemscope itemtype="http://schema.org/$scope
if there is also available a $content it will output
<span itemprop="$property" itemscope itemtype="http://schema.org/$scope">$content</span>
  • meta → example:
<meta content="$content" itemprop="$property">
if no $content is available will output
itemprop="$property"
  • normal → example:
itemprop="$property"
if there is available a $content will output
<span itemprop="$property">$content</span>

How To implement Microdata yourself

0 коммент.:

Отправить комментарий