For many popular shop applications (e.g. Magento, Joomla/Virtuemart, Wordpress/WPEC,...), there exist free extension modules that make adding GoodRelations RDFa for semantic SEO as easy as a few mouse-clicks. That is by far the simplest way of adding GoodRelations to your site, so make sure you check the current list of available modules first.
If your software package is not listed there, you can:
The easiest way is to use the on-line snippet generator tool that creates the markup for GoodRelations automatically - ready for copy-and-paste.
Alternatively, you can add the markup manually, as shown below.
In this section, you find ready-to-use snippets for adding rich meta-data about a company, a store, or a product / offer to existing Web pages.
It's incredibly simple:
That's it. You will be all set.
Insert the additional HTML markup given below anywhere in the body section of your main Web page and fill the following elements with your correct data:
<!-- in RDFa 1.1, you can use the abbreviation:
<div profile="http://www.heppnetz.de/grprofile/">
-->
<div xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
ns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:vcard="http://www.w3.org/2006/vcard/ns#">
<div about="#company" typeof="gr:BusinessEntity">
<div property="gr:legalName" content="Hepp's Bagel Bakery Ltd."></div>
<div rel="vcard:adr">
<div typeof="vcard:Address">
<div property="vcard:country-name" content="Germany"></div>
<div property="vcard:locality" content="Munich"></div>
<div property="vcard:postal-code" content="85577"></div>
<div property="vcard:street-address" content="1234 Main Street"></div>
</div>
</div>
<div property="vcard:tel" content="+1 408 970-6104"></div>
<div rel="foaf:depiction" resource="http://www.hepps-bagels.com/image_or_logo.png">
</div>
<div rel="foaf:page" resource=""></div>
</div>
</div>
Statistics:
Insert the additional HTML markup given below anywhere in the body section of the Web page describing your shop(s), restaurant(s), or store(s), and fill the following elements with your correct data:
If you have multiple shops, but just one page, simply copy the snippet multiple times and replace all ocurrences of the three elements
inside the same snippet by
etc.
<!-- in RDFa 1.1, you can use the abbreviation:
<div profile="http://www.heppnetz.de/grprofile/"> -->
<div xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
ns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">
<div about="#store" typeof="gr:Location">
<div property="gr:name" content="Pizzeria La Mamma"></div>
<div rel="vcard:adr">
<div typeof="vcard:Address">
<div property="vcard:country-name" content="Germany"></div>
<div property="vcard:locality" content="Munich"></div>
<div property="vcard:postal-code" content="85577"></div>
<div property="vcard:street-address" content="1234 Main Street"></div>
</div>
</div>
<div property="vcard:tel" content="+33 408 970-6104"></div>
<div rel="foaf:depiction" resource="http://www.pizza-la-mamma.com/image_or_logo.png">
</div>
<div rel="vcard:geo">
<div>
<div property="vcard:latitude" content="48.08" datatype="xsd:float"></div>
<div property="vcard:longitude" content="11.64" datatype="xsd:float"></div>
</div>
</div>
<div rel="gr:hasOpeningHoursSpecification">
<div about="#mon_fri" typeof="gr:OpeningHoursSpecification">
<div property="gr:opens" content="08:00:00" datatype="xsd:time"></div>
<div property="gr:closes" content="18:00:00" datatype="xsd:time"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Friday"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Thursday"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Wednesday"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Tuesday"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Monday"></div>
</div>
</div>
<div rel="gr:hasOpeningHoursSpecification">
<div about="#sat" typeof="gr:OpeningHoursSpecification">
<div property="gr:opens" content="08:30:00" datatype="xsd:time"></div>
<div property="gr:closes" content="14:00:00" datatype="xsd:time"></div>
<div rel="gr:hasOpeningHoursDayOfWeek"
resource="http://purl.org/goodrelations/v1#Saturday"></div>
</div>
</div>
<div rel="foaf:page" resource=""></div>
</div>
</div>
Statistics:
Insert the additional HTML markup given below anywhere in the body section of your Web page template for individual products, and fill the following elements with the correct data for the respective product:
<!-- in RDFa 1.1, you can use the abbreviation:
<div profile="http://www.heppnetz.de/grprofile/"> -->
div xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
< ns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">
div about="#offering" typeof="gr:Offering">
<div property="gr:name" content="Canon Rebel T2i (EOS 550D) $899" xml:lang="en"></div>
<div property="gr:description" content="The Rebel T2i EOS 550D is Cannon's
<top-of-the-line consumer digital SLR camera.
It can shoot up to 18 megapixel resolution photos and features an ISO range of 100-6400.
Now just $ 899 $" xml:lang="en"></div>
div rel="foaf:depiction"
< resource="http://a.img-dpreview.com/previews/CanonEOS550D/images/intro.jpg">
div>
</div rel="gr:hasBusinessFunction" resource="http://purl.org/goodrelations/v1#Sell">
<div>
</div property="gr:hasEAN_UCC-13" content="013803123784" datatype="xsd:string"></div>
<div rel="gr:hasPriceSpecification">
<div typeof="gr:UnitPriceSpecification">
<div property="gr:hasCurrency" content="USD" datatype="xsd:string"></div>
<div property="gr:hasCurrencyValue" content="899" datatype="xsd:float"></div>
<div>
</div>
</div rel="gr:acceptedPaymentMethods"
< resource="http://purl.org/goodrelations/v1#PayPal"></div>
div rel="gr:acceptedPaymentMethods"
< resource="http://purl.org/goodrelations/v1#MasterCard"></div>
div rel="foaf:page" resource="http://myshop.com/canon-rebel-t2i/"></div>
<div>
</div> </
Add additional or delete existing lines of the form
div rel="gr:acceptedPaymentMethods"
< resource="http://purl.org/goodrelations/v1#PayPal"></div>
for indicating the accepted payment methods. The following payment methods are currently supported by GoodRelations:
If you have multiple products within the same Web page, simply copy the snippet multiple times and replace all occurrences of the element
inside the same snippet by
Important: When the page sets the base address (URI) using
base href="..."> <
to something different from the actual product detail page URI (e.g. to the main page), then you must use the full URI of the page plus the respective hash fragment ""#offer", e.g.
div about="http://myshop.com/canon-rebel-t2i/#offer" typeof="gr:BusinessEntity"> <
For more info, see here.
Statistics:
Once you have added the structured data to the Web page markup, you have to link them so that search engines and recommender system can find them. Two types of links are important:
1. Find out the final main Web address (URL) under which the page with the company markup will be available.
Examples:
If there are multiple ways to access the page, use the shortest and most official one. Let's assume it is
in our example.
Now add "#company" to that address, which gives us
as the identifier for the company data.
2. Insert the following additional line to the data markup for each product / offer page:
div rev="gr:offers" resource="http://www.hepps-bagels.com/#company"></div> <
Instead of http://www.hepps-bagels.com/#company, use the correct URL determined in step 1.
This additional line must follow directly after the element
div about="#offering" typeof="gr:Offering"> <
So the correct markup in our example would be
div about="#offering" typeof="gr:Offering">
<div rev="gr:offers" resource="http://www.hepps-bagels.com/#company"></div>
<div property="gr:name"
< content="Canon Rebel T2i (EOS 550D) $899" xml:lang="en"></div>
...
1. Determine the complete Web address (URL, including "#company") of the company as before. In our example, we use
as the identifier for the company data.
2. Insert the following additional line to the data markup for each store page:
div rev="gr:hasPOS" resource="http://www.hepps-bagels.com/#company"></div> <
Instead of http://www.hepps-bagels.com/#company, use the correct URL determined in step 1.
This additional line must follow directly after the element
div about="#store" typeof="gr:Location"> <
So the correct markup in our example would be
div about="#store" typeof="gr:Location">
<div rev="gr:hasPOS" resource="http://www.hepps-bagels.com/#company"></div>
<div property="gr:name" content="Pizzeria La Mamma"></div>
< ...
Add a "xmlns" attribute with the value "http://www.w3.org/1999/xhtml" and a "version" attribute with the value "XHTML+RDFa 1.0" to the
element of your document:
html ns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0" xml:lang="en"> <
This is enough for basic access to your rich meta-data.
Your data is much more visible and useful if your page is compliant with the XHTML 1.0 strict specification. If you meet that requirement, you should instead update the page header as follows:
1. Change the DOCTYPE in the header to "XHTML+RDFa"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
> "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"
2. Add a "xmlns" attribute with the value "http://www.w3.org/1999/xhtml" and a "version" attribute with the value "XHTML+RDFa 1.0" to the
element of your document:
html ns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0" xml:lang="en"> <
3. Check that the
element includes the proper content type and encoding for XHTML:
head>
<<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
title>Your page title blabla...</title>
<</head>
a) Set DOCTYPE to XHTML+RDFa 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
> "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"
b) Set html version attribute to XHTML+RDFa1.0
html ns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0"> <
a) Set DOCTYPE to html
<!DOCTYPE html>
b) Set html version attribute to HTML+RDFa1.1
html version="HTML+RDFa 1.1" lang="en"> <
Note that this is only a W3C Working Draft at this stage, but should work nonetheless.
See also: http://answers.semanticweb.com/questions/1187/can-i-use-the-html5-doctype-with-rdfa
Either use HTML5 recipe or simply set the html version attribute to HTML+RDFa1.1 or XHTML+RDFa1.0. Most clients will extract RDF from this type.
html ns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0"> <
or
html version="HTML+RDFa 1.1"> <