Difference between revisions of "Microdata"

From Joomla! Documentation

(Punctuation, capitalization, markup changes, URL corrections.)
 
(29 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
<noinclude><languages /></noinclude>
 
{{incomplete}}
 
{{incomplete}}
 +
<noinclude>{{Joomla version|version=3.2|time=and after}}</noinclude>
 +
<translate>==What is Microdata?== <!--T:1-->
 +
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.</translate>
 +
__TOC__
 +
<translate><!--T:2-->
 +
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.</translate>
  
==What is Microdata?==
+
<translate><!--T:3-->
 +
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 [https://schema.org Schema.org].</translate>
  
{{underconstruction}}
+
<translate><!--T:4-->
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.
+
To understand how search engines use the microdata information, take a look at [https://www.youtube.com/watch?v=A-kX0Aut-18 this short video].</translate>
  
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.
+
<translate>==Joomla! 3.x Roadmap for Microdata== <!--T:5--></translate>
 +
<translate><!--T:6-->
 +
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.</translate>
  
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 [https://schema.org schema.org].
+
<translate>==How Do I Use Microdata?== <!--T:7-->
<br>
+
Microdata can be added to Joomla! using template overrides or with the use of plugins which allow you to insert microdata into specific resources.</translate>
To understand how search engines use the Microdata information take a look at [https://www.youtube.com/watch?v=A-kX0Aut-18 this short video].
 
  
==How do I use Microdata?==
+
<translate><!--T:8-->
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!''' {{JVer|3.2}} there is a [https://github.com/joomla/joomla-cms/tree/master/libraries/joomla/microdata library] within Joomla! which allows developers to pull in microdata without needing to format it correctly.</translate>
<br>
 
<u>As of '''Joomla! 3.2''' there is a [https://github.com/joomla/joomla-cms/tree/master/libraries/joomla/microdata library] within Joomla! which allows developers to pull in microdata without needing to format it correctly</u>. The following resources are available by the author of the microdata library introducing the library and how to use it:
 
*http://magazine.joomla.org/issues/issue-oct-2013/item/1551-what-about-microdata-rich-snippets-in-joomla
 
*https://gist.github.com/PAlexcom/6339949
 
  
==JMicrodata==
+
<translate>==JMicrodata== <!--T:9-->
[https://github.com/joomla/joomla-cms/blob/master/libraries/joomla/microdata/microdata.php JMicrodata] (since version 3.2) is a [https://github.com/joomla/joomla-cms/tree/master/libraries/joomla/microdata library] to implement http://schema.org microdata semantics.
+
[https://github.com/joomla/joomla-cms/blob/master/libraries/joomla/microdata/microdata.php JMicrodata] is a library to implement and output https://schema.org microdata semantics.</translate>
<br>
+
 
The JMicrodata class uses the [https://github.com/joomla/joomla-cms/blob/master/libraries/joomla/microdata/types.json types.json] file which contains all available http://schema.org Types and Properties.
+
<translate><!--T:10-->
<br>
+
The library was designed with this goals in mind:</translate>
The types.json was automatically created with the https://github.com/PAlexcom/Spider4Schema web crawler.
+
<translate><!--T:11-->
<br>
+
# Having the '''possibility to switch the Microdata Type dynamically''' You just change the Type. (There are 558 available types).</translate>
<br>
+
<translate><!--T:12-->
For some usage examples you can see the library test file https://github.com/joomla/joomla-cms/blob/master/tests/unit/suites/libraries/joomla/microdata/JMicrodataTest.php
+
# '''Display validated semantics''' The library takes care to display data correctly.</translate>
<br>
+
<translate><!--T:13-->
<br>
+
# '''Enable/disable the microdata''' semantics</translate>
For a more detailed documentation of the library see the gist created by the author:
+
<translate><!--T:14-->
<br>
+
# '''Fallbacks''' You should never lose any meaningful semantic.</translate>
https://gist.github.com/PAlexcom/6339949
+
<translate><!--T:15-->
 +
The JMicrodata class uses the [https://github.com/joomla/joomla-cms/blob/master/libraries/joomla/microdata/types.json types.json] file which contains all available https://schema.org ''Types'' and ''Properties''. That file was automatically created with the https://github.com/PAlexcom/Spider4Schema web crawler.</translate>
 +
 
 +
<translate>==How Do I Use the JMicrodata Library?== <!--T:16-->
 +
First of all you need to make an instance of the library in your extensions:</translate>
  
==JMicrodata documentation==
 
All Microdata HTML output is handled by the JMicrodata class.
 
<br>
 
<br>
 
 
<source lang="php">
 
<source lang="php">
JMicrodata::htmlScope($scope);
+
<?php
</source>  
+
$microdata = new JMicrodata('Article');
Return:
+
?>
 +
</source>
 +
 
 +
<translate><!--T:17-->
 +
So let's suppose that you have the following string which is part of your article:</translate>
 +
 
 +
<source lang="html4strict">
 +
<div>
 +
    <!-- Author of the content -->
 +
    <span>
 +
        Written by Alexandru Pruteanu
 +
    </span>
 +
    <!-- The content -->
 +
    Here is the article text...
 +
<div>
 +
</source>
 +
 
 +
<translate><!--T:18-->
 +
And you want to add microdata semantics and you setup the current scope type as ''Article'':</translate>
 +
 
 
<source lang="php">
 
<source lang="php">
itemscope itemtype="http://schema.org/$scope"
+
<?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>
 
</source>
 
</source>
the HTML <i>Scope</i> of the given <i>Type</i>, must be inside a HTML tag element.
+
 
<br>
+
<translate><!--T:19-->
<br>
+
The library will display:</translate>
<br>
+
 
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
<translate><!--T:20-->
 +
What happens if the current scope is something other than ''Article''? For example a ''Product'' scope and the current scope doesn't have an ''author'' and ''articleBody'' property?</translate>
 +
 
 
<source lang="php">
 
<source lang="php">
JMicrodata::htmlProperty($property);
+
<?php
</source>  
+
$microdata = new JMicrodata('Product');
Return:
+
?>
 +
 
 +
<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>
 +
</source>
 +
 
 +
<translate><!--T:21-->
 +
As you've added a fallback <tt>->fallback('Person', 'name')</tt>, it will fallback to the ''Person'' type. You will not lose any meaningful semantic.</translate>
 +
 
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
<translate><!--T:22-->
 +
If you don't need all that microdata information, just disable that feature by calling: <tt>$microdata->enable(false);</tt></translate>
 +
 
 +
<source lang="php">
 +
<?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>
 +
 
 +
</source>
 +
 
 +
<translate><!--T:23-->
 +
The library will display the following:</translate>
 +
 
 +
<source lang="html4strict">
 +
<div>
 +
    <!-- Author of the content -->
 +
    <span>
 +
        Written by Alexandru Pruteanu
 +
    </span>
 +
    <!-- The content -->
 +
    Here is the article text...
 +
<div>
 +
</source>
 +
 
 +
<translate>==JMicrodata Documentation== <!--T:24-->
 +
All Microdata HTML output is handled by the JMicrodata class.</translate>
 +
 
 +
<code>'''JMicrodata::htmlScope($scope);'''</code>
 +
<translate><!--T:25-->
 +
Return:</translate>
 +
 
 +
<source lang="php">
 +
itemscope itemtype="https://schema.org/$scope"
 +
</source>
 +
 
 +
<translate><!--T:26-->
 +
the HTML ''Scope'' of the given ''Type'' must be inside a HTML tag element.</translate>
 +
 
 +
<code>'''JMicrodata::htmlProperty($property);'''</code>
 +
<translate><!--T:27-->
 +
Return:</translate>
 +
 
 
<source lang="php">
 
<source lang="php">
 
itemprop="$property"
 
itemprop="$property"
 
</source>
 
</source>
the HTML of the given <i>Property</i>, must be inside a HTML tag element.
+
 
<br>
+
<translate><!--T:28-->
<br>
+
the HTML of the given ''Property'' must be inside a HTML tag element.</translate>
<br>
+
 
 +
<code>'''JMicrodata::htmlSpan($content, $property = "", $scope = "", $inverse = false);'''</code>  
 +
<translate><!--T:29-->
 +
Return:</translate>
 +
 
 
<source lang="php">
 
<source lang="php">
JMicrodata::htmlSpan($content, $property = '', $scope = '', $inverse = false);
+
<span itemscope itemtype="https://schema.org/$scope" itemprop="$property">
</source>
 
Return:
 
<source lang="php">
 
<span itemscope itemtype="http://schema.org/$scope itemprop="$property">
 
 
     $content
 
     $content
 
</span>
 
</span>
 
</source>
 
</source>
the microdata in a <span> tag, there is also available a JMicrodata::htmlDiv() method with the same functionalities.
+
 
<br>
+
<translate><!--T:30-->
<br>
+
the microdata in a <span> tag. There is also available a JMicrodata::htmlDiv() method with the same functionalities.</translate>
<br>
+
 
 +
<code>'''JMicrodata::htmlMeta($content, $property, $scope = "", $inverse = false);'''</code>
 +
<translate><!--T:31-->
 +
Return:</translate>
 +
 
 
<source lang="php">
 
<source lang="php">
JMicrodata::htmlMeta($content, $property, $scope = '', $inverse = false);
+
<meta $property $scope content="$content">
</source>
 
Return:
 
<source lang="php">
 
<meta $property $scope content='$content'>
 
 
</source>
 
</source>
the microdata in a <meta> tag with <i>content for machines</i>.
+
 
<br>
+
<translate><!--T:32-->
<br>
+
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.</translate>
<br>
+
 
 +
<code>'''$microdata = JMicrodata($type = "", $flag = true);'''</code>
 +
<translate><!--T:33-->
 +
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 ''Thing'' Type if the Type isn't available or given.</translate>
 +
 
 +
<code>'''$microdata->enable($flag = true);'''</code>
 +
<translate><!--T:34-->
 +
Enable or Disable HTML Microdata semantics output.</translate>
 +
 
 +
<code>'''$microdata->isEnabled();'''</code>
 +
<translate><!--T:35-->
 +
Return true if Microdata semantics HTML output are enabled.</translate>
 +
 
 +
<code>'''$microdata->setType($type);'''</code>
 +
<translate><!--T:36-->
 +
Set a new Schema.org ''Type''. There is also a $microdata->getType() function to retrieve the current ''Type''.</translate>
 +
 
 +
<code>'''$microdata->property($name);'''</code>
 +
 
 +
<translate><!--T:37-->
 +
Setup the ''Property'' if available in the current ''Type'' Scope. There is also a $microdata->getProperty() function to retrieve the current ''Property''.</translate>
 +
 
 +
<code>'''$microdata->content($value, $machineValue = null);'''</code>
 +
<translate><!--T:38-->
 +
Setup a ''Text value'' or ''Content value'' for the Microdata. There is also a $microdata->getContent() function to retrieve the current ''Text value''.</translate>
 +
 
 +
<code>'''$microdata->fallback($type, $property);'''</code>
 +
<translate><!--T:39-->
 +
Setup a Fallback ''Type'' and ''Property'', there are also the $microdata->getFallbackType() and $microdata->getFallbackProperty() to retrieve the Fallback ''Type'' and Fallback ''Property''. Fallback to ''Thing Type'' if the ''Type'' isn't available, Fallback to ''null'' the Property if isn't available.</translate>
 +
<code>'''$microdata->displayScope();'''</code>
 +
<translate><!--T:40-->
 +
Return:</translate>
 +
 
<source lang="php">
 
<source lang="php">
$microdata = JMicrodata($type = '', $flag = true);
+
itemscope itemtype="https://schema.org/$scope
</source>
 
Create a new instance of the <i>JMicrodata</i> class and setup the current <i>Type</i>, the flag param is for enabling or disabling HTML microdata semantics output. Fallback to <i>Thing</i> Type if the Type isn't available or given.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->enable($flag = true);
 
</source>
 
Enable or Disable HTML Microdata semantics output.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->isEnabled();
 
</source>
 
Return true if Microdata semantics HTML output are enabled.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->setType($type);
 
</source>
 
Set a new Schema.org <i>Type</i>, there is also a $microdata->getType() function to retrieve the current <i>Type</i>.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->property($name);
 
</source>
 
Setup the <i>Property</i> if available in the current <i>Type</i> Scope, there is also a $microdata->getProperty() function to retrieve the current <i>Property</i>.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->content($value, $machineValue = null);
 
</source>
 
Setup a <i>Text value</i> or <i>Content value</i> for the Microdata, there is also a $microdata->getContent() function to retrieve the current <i>Text value</i>.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->fallback($type, $property);
 
</source>
 
Setup a Fallback <i>Type</i> and <i>Property</i>, there are also the $microdata->getFallbackType() and $microdata->getFallbackProperty() to retrieve the Fallback <i>Type</i> and Fallback <i>Property</i>. Fallback to <i>Thing Type</i> if the <i>Type</i> isn't available, Fallback to <i>null</i> the Property if isn't available.
 
<br>
 
<br>
 
<br>
 
<source lang="php">
 
$microdata->displayScope();
 
 
</source>
 
</source>
Return:  
+
 
 +
<translate><!--T:41-->
 +
The HTML with the ''Scope'' of the current ''Type'', must be inserted inside a tag element.</translate>
 +
 
 +
<code>'''$microdata->display($displayType = "", $emptyOutput = false);'''</code>
 +
<translate><!--T:42-->
 +
Return the Microdata HTML, if the ''Property'' isn't available it checks for a Fallback, otherwise return ''.</translate>
 +
 
 +
<translate><!--T:43-->
 +
There are 4 types of $displayType:</translate>
 +
* inline
 +
* span
 +
* html
 +
* meta
 +
<translate>
 +
 
 +
<!--T:44-->
 +
<u>This method contains the HTML Microdata display logic.</u>
 +
If you specify the ''$displayType'' param, the Microdata will be returned the way you specified and expect.
 +
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 ...)</translate>
 +
 
 +
<translate><!--T:45-->
 +
— What happens if you call display($displayType = "meta") ?</translate>
 +
 
 +
<translate><!--T:46-->
 +
The returned HTML will be inside a <meta> HTML tag.</translate>
 +
 
 +
<translate><!--T:47-->
 +
— What happend if you call display()?</translate>
 +
 
 +
<translate><!--T:48-->
 +
The method will automatically check the expected type for the given Property, and will return the right Microdata HTML.</translate>
 +
 
 +
<translate><!--T:49-->
 +
There are 3 types of Microdata:</translate>
 +
 
 +
<translate><!--T:50-->
 +
* nested → example:</translate>
 
<source lang="php">
 
<source lang="php">
itemscope itemtype="http://schema.org/$scope
+
itemprop="$property" itemscope itemtype="https://schema.org/$scope"</source>
</source>
+
 
the HTML with the <i>Scope</i> of the current <i>Type</i>, must be inserted inside a tag element.
+
<translate><!--T:51-->
<br>
+
if there is also available a $content it will output</translate>
<br>
 
<br>
 
 
<source lang="php">
 
<source lang="php">
$microdata->display($displayType = '', $emptyOutput = false);
+
<span itemprop="$property" itemscope itemtype="https://schema.org/$scope">$content</span></source>
</source>
+
<translate>
Return the Microdata HTML, if the <i>Property</i> isn't available it checks for a Fallback, otherwise return ''.
+
<!--T:52-->
<br>
+
* meta → example:</translate>
<br>
 
There are 4 types of $displayType:
 
    * inline
 
    * span
 
    * html
 
    * meta
 
<u>This method contains the HTML Microdata display logic</u>,
 
If you specify the <i>$displayType</i> param, the Microdata will be returned the way you specified and expect — to,
 
Otherwise if the <i>$displayType</i> param is empty it will be processed by the <i>display()</i> method and returned the HTML in the right way, with the expected <i>Property</i> Type (example of expectedTypes = URL, Text, Person ...)
 
<br>
 
<br>
 
— What happens if you call display($displayType = 'meta') ?
 
<br>
 
The returned HTML will be inside a <meta> HTML tag.
 
<br>
 
<br>
 
— What happend if you call display()?
 
<br>
 
The method will automatically check the expected type for the given Property, and will return the right Microdata HTML.
 
<br>
 
<br>
 
There are 3 types of Microdata:
 
* nested → example: itemprop="author" itemscope itemtype="http://schema.org/Person, if there is also available a $content it will output <span itemprop="author" itemscope itemtype="http://schema.org/Person>$content</span>
 
* meta → example: <meta content="2011-01-01" itemprop="datePublished">, if no $content is available will output itemprop="datePublished"
 
* normal → example: itemprop="author", if there is available a $content will output <span itemprop="author">$content</span>
 
==How do I use the JMicrodata library?==
 
First of all you need to make an instance of the library in your extensions:
 
 
<source lang="php">
 
<source lang="php">
$microdata = new JMicrodata('Article');
+
<meta content="$content" itemprop="$property"></source>
</source>
+
<translate><!--T:53-->
So let's suppose that you have the following string which is part of your article and the current scope is <i>Article</i>:
+
if no $content is available will output</translate>
 
<source lang="php">
 
<source lang="php">
echo 'Written by Alexandru Pruteanu';
+
itemprop="$property"</source>
</source>
+
 
And the microdata you need to add is an <i>author</i> property:
+
<translate><!--T:54-->
 +
* normal → example:</translate>
 
<source lang="php">
 
<source lang="php">
echo 'Written by' . $microdata->content(“Alexandru Pruteanu”)->property('author')->fallback('Person', 'name')->display();
+
itemprop="$property"</source>
</source>
+
<translate><!--T:55-->
The library will display:
+
if there is available a $content will output</translate>
<source lang="html4strict">
 
Written by
 
<span itemprop='author' itemscope itemtype='https://schema.org/Person'>
 
    <span itemprop='name'>
 
        Alexandru Pruteanu
 
    </span>
 
</span>
 
</source>
 
What happens if the current scope is something else than <i>Article</i>, for example a <i>Product</i> scope, and the current scope doesn't have an <i>author</i> property?
 
<br>
 
Well it will fallback in:
 
<source lang="html4strict">
 
Written by
 
<span itemscope itemtype='https://schema.org/Person'>
 
    <span itemprop='name'>
 
        Alexandru Pruteanu
 
    </span>
 
</span>
 
</source>
 
If I want to disable the microdata semantics output?
 
<br>
 
You can simply disable the microdata output by calling the following function:
 
 
<source lang="php">
 
<source lang="php">
$microdata->enable(false);
+
<span itemprop="$property">$content</span></source>
</source>
+
 
The library will display the following:
+
<translate><!--T:56-->
<source lang="html4strict">
+
For some usage examples you can see the library test file https://github.com/joomla/joomla-cms/blob/master/tests/unit/suites/libraries/joomla/microdata/JMicrodataTest.php
Written by Alexandru Pruteanu
+
</translate>
</source>
+
 
==How To implement Microdata yourself==
+
<translate>==How To Implement Microdata Yourself== <!--T:57-->
* [[How To Implement Rich Snippet for Breadcrumbs]]
+
* [[S:MyLanguage/How To Implement Rich Snippet for Breadcrumbs|How To Implement Rich Snippet for Breadcrumbs]]</translate>
[[Category:Search Engine Optimisation]]
+
 
 +
<noinclude>
 +
<translate><!--T:58-->
 +
[[Category:Search Engine Optimisation]]</translate>
 +
</noinclude>

Latest revision as of 18:00, 24 August 2022

Other languages:
English • ‎Nederlands • ‎español • ‎français • ‎português do Brasil
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 section has not been edited in several days, please consider helping complete the content.
This article was last edited by Cmb (talk| contribs) 20 months ago. (Purge)

Joomla! 
≥ 3.2

What is Microdata?[edit]

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[edit]

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?[edit]

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[edit]

JMicrodata is a library to implement and output https://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 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 https://schema.org Types and Properties. That file was automatically created with the https://github.com/PAlexcom/Spider4Schema web crawler.

How Do I Use the JMicrodata Library?[edit]

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 other 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. 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, 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[edit]

All Microdata HTML output is handled by the JMicrodata class.

JMicrodata::htmlScope($scope); Return:

itemscope itemtype="https://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="https://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 Thing Type 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 Fallback Property. Fallback to Thing Type if the Type isn't available, Fallback to null the Property if isn't available. $microdata->displayScope(); Return:

itemscope itemtype="https://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. 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="https://schema.org/$scope"

if there is also available a $content it will output

<span itemprop="$property" itemscope itemtype="https://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>

For some usage examples you can see the library test file https://github.com/joomla/joomla-cms/blob/master/tests/unit/suites/libraries/joomla/microdata/JMicrodataTest.php

How To Implement Microdata Yourself[edit]