Quickstart

= GoodRelations Quickstart Guide = On this page, we explain how you can add GoodRelations to your Web shop, static pages, or other e-commerce applications easily.

= How Can I Use GoodRelations? =

It's incredibly simple:


 * 1) Customize and insert the patterns of additional HTML markup into your Web pages.
 * 2) Add links between the patterns.
 * 3) Modify the header information of the respective pages.

That's it. You will be all set.

= HTML Patterns for Rich Markup =

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.

Company
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:


 * "Hepp's Bagel Bakery Ltd. ": The official legal name of your company or business.
 * "Germany": Your country.
 * "Munich": The city in which your business is registered.
 * "85577": The zip code of your residence.
 * "1234 Main Street": The street and number of your residence
 * "+1 408 970-6104": The phone number, including the international prefix.
 * "http://www.hepps-bagels.com/image_or_logo.png": The Web address (URL) of a logo or image.



 

Statistics:


 * 16 lines of markup
 * less than 1000 characters of extra code

Shop, Restaurant, or Store, and Opening Hours
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:


 * "Pizzeria La Mamma": The name of the store or location.
 * "Germany": Your country.
 * "Munich": The city for the location.
 * "85577": The zip code  for the location.
 * "1234 Main Street": The street and number for the location.
 * "+33 408 970-6104": A phone number, including the international prefix.
 * "http://www.pizza-la-mamma.com/image_or_logo.png": The Web address (URL) of a logo or image.
 * "48.08" / "11.64": The geo position of the store as longitude and latitude (Unknown? Find it here!).
 * "08:00:00" / "18:00:00": The opening hours for Monday through Friday.
 * "08:30:00" / "14:00:00": The opening hours for Saturday.

If you have multiple shops, but just one page, simply copy the snippet multiple times and replace all ocurrences of the three elements


 * "#store", "#mon_fri", and "#sat"

inside the same snippet by


 * "#store1", "#mon_fri1", and "#sat1"
 * "#store2", "#mon_fri2", and "#sat2"
 * "#store3", "#mon_fri3", and "#sat3"

etc.



        

Statistics:


 * 41 lines of markup
 * less than 2,500 characters of extra code

Offer / Product
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:


 * "Canon Rebel T2i (EOS 550D) $899" : The name of the product.
 * "The Rebel T2i EOS 550D is Cannon's top-of-the-line ...": The long description of the product.
 * xml:lang="en": Replace "en" by the ISO 639-1 code for the language of the name or description if the text is not in English.
 * "013803123784": The EAN-13, 13-digit UPC, or 13-digit ISBN code for the product. This code is now officially called GTIN-13. 10-digit ISBNs and 12-digit UPC codes can be converted, see here for converting ISBNs. Converting 12-digit UPCs into GTIN13 is simpler, just add a preceeding zero. That code is optional for GoodRelations, but highly recommended, since it increases the visibility of your items a lot.
 * "USD" and "899": The currency and price for the product (899 US$ in our example). Use 3-letter ISO 4217 codes for currencies, e.g. EUR for euro.



  <div rel="foaf:depiction" resource="http://a.img-dpreview.com/previews/CanonEOS550D/images/intro.jpg"> <div rel="gr:hasBusinessFunction" resource="http://purl.org/goodrelations/v1#Sell"> <div property="gr:hasEAN_UCC-13" content="013803123784" datatype="xsd:string"> <div rel="gr:acceptedPaymentMethods" resource="http://purl.org/goodrelations/v1#PayPal"> <div rel="gr:acceptedPaymentMethods" resource="http://purl.org/goodrelations/v1#MasterCard"> <div rel="foaf:page" resource="http://myshop.com/canon-rebel-t2i/">

Add additional or delete existing lines of the form <div rel="gr:acceptedPaymentMethods" resource="http://purl.org/goodrelations/v1#PayPal"> for indicating the '''accepted payment methods. '''The following payment methods are currently supported by GoodRelations:


 * http://purl.org/goodrelations/v1#ByBankTransferInAdvance
 * http://purl.org/goodrelations/v1#ByInvoice
 * http://purl.org/goodrelations/v1#Cash
 * http://purl.org/goodrelations/v1#CheckInAdvance
 * http://purl.org/goodrelations/v1#COD
 * http://purl.org/goodrelations/v1#DirectDebit
 * http://purl.org/goodrelations/v1#PayPal
 * http://purl.org/goodrelations/v1#AmericanExpress
 * http://purl.org/goodrelations/v1#DinersClub
 * http://purl.org/goodrelations/v1#Discover
 * http://purl.org/goodrelations/v1#MasterCard
 * http://purl.org/goodrelations/v1#VISA

If you have multiple products within the same Web page, simply copy the snippet multiple times and replace all ocurrences of the element


 * "#offer"

inside the same snippet by


 * "#offer1"
 * "#offer2"
 * "#offer3"

Statistics:


 * 18 lines of markup
 * less than 1,500 characters of extra code

= Connecting the Dots – Linking the Data =

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) Links from offers / products to the company.
 * 2) Links from the company to its stores / restaurants.

Linking from Offers / Products to the Company
1. Find out the final main Web address (URL) under which the page with the company markup will be available.

Examples:


 * http://www.hepps-bagels.com/
 * http://www.hepps-bagels.com/index.html
 * http://www.hepps-bagels.com/about.html

If there are multiple ways to access the page, use the shortest and most official one. Let's assume it is


 * http://www.hepps-bagels.com/

in our example.

Now add "#company" to that address, which gives us


 * http://www.hepps-bagels.com/#company

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">

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

So the correct markup in our example would be    <div rev="gr:offers" resource="http://www.hepps-bagels.com/#company"> <div property="rdfs:label" content="Canon Rebel T2i (EOS 550D) $899" xml:lang="en"> ...

Linking from the Company to its Stores / Shops / Restaurants.
1. Determine the complete Web address (URL, including "#company") of the company as before. In our example, we use


 * http://www.hepps-bagels.com/#company

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">

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

So the correct markup in our example would be    <div rev="gr:hasPOS" resource="http://www.hepps-bagels.com/#company"> ...

= Updating the XHTML/HTML Page Header =

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 &lt;html&gt; element of your document:

<html xmlns="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, however, 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 &lt;html&gt; element of your document: <html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0" xml:lang="en">

3. Check that the &lt;head&gt; element includes the proper content type and encoding for XHTML:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> Your page title blabla...

= Further Information =

Remarks

 * We use vcard:tel with plain literals in those examples, since this is the form expected by Yahoo. This is in part contradicting the official VCard Ontology specification but maximizes the visibility of your data. Should Google or any other major application require the official VCard modeling, we will change the recipe accordingly. Currently, Google recommends its own vocabulary and "tel" property.

Links

 * Online tool for creating rich snippets
 * Project Main Page
 * Community
 * Please subscribe to the GoodRelations mailing list at http://ebusiness-unibw.org/cgi-bin/mailman/listinfo/goodrelations
 * Mailing list archives


 * CookBook: GoodRelations Recipes and Examples
 * Webcasts and Podcasts
 * Overview: What is GoodRelations and why should I care?
 * How-To: How can I use GoodRelations in my Web page?
 * GoodRelations CookBook
 * Tools
 * Applications
 * Producing GoodRelations Data
 * Consuming GoodRelations Data
 * Examples in the Wild
 * Store and Offer Data
 * Product Model Data (Datasheets, Feature Data)
 * Examples of GoodRelations-empowered Web Shops
 * Tutorials
 * Selected Talks and Presentations