Rich Snippets in Joomla - #JUG073

A presentation at Joomla User Group ‘s-Hertogenbosch The Netherlands in September 2013 in 's Hertogenbosch, Netherlands by Hans Kuijpers

Slide 1

Slide 1

hans2103 2 september 2013

Slide 2

Slide 2

hans2103 2 september 2013

Slide 3

Slide 3

hans2103 2 september 2013

Slide 4

Slide 4

hans2103 2 september 2013

Slide 5

Slide 5

hans2103 2 september 2013

Slide 6

Slide 6

hans2103 2 september 2013

Slide 7

Slide 7

hans2103 2 september 2013

Slide 8

Slide 8

hans2103 2 september 2013

Slide 9

Slide 9

markup <div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 2 september 2013

Slide 10

Slide 10

itemscope <div itemscope> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 2 september 2013

Slide 11

Slide 11

itemtype <div itemscope itemtype=”http://schema.org/ Movie”> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 2 september 2013

Slide 12

Slide 12

itemprop <div itemscope itemtype =”http://schema.org/ Movie”> <h1 itemprop=”name”>Avatar</h1> <span>Director: <span itemprop=”director”>James Cameron</span> (born August 16, 1954)</span> <span itemprop=”genre”>Science fiction</ span> <a href=”../movies/avatar-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> </div> hans2103 2 september 2013

Slide 13

Slide 13

embedded items <div itemscope itemtype =”http://schema.org/ Movie”> <h1 itemprop=”name”>Avatar</h1> <div itemprop=”director” itemscope itemtype=”http://schema.org/Person”> Director: <span itemprop=”name”>James Cameron</span> (born <span itemprop=”birthDate”>August 16, 1954)</span> </div> <span itemprop=”genre”>Science fiction</ span> <a href=”../movies/avatar-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> hans2103 2 september 2013

Slide 14

Slide 14

hopsakee… aan de slag! hans2103 2 september 2013

Slide 15

Slide 15

hans2103 2 september 2013

Slide 16

Slide 16

hans2103 2 september 2013

Slide 17

Slide 17

events aanmaken via eigen Google+ pagina https://plus.google.com/u/5/116775654289439490891/ hans2103 2 september 2013

Slide 18

Slide 18

Gekoppeld aan Gmail Calendar hans2103 2 september 2013

Slide 19

Slide 19

naar Joomla via GCalender hans2103 2 september 2013

Slide 20

Slide 20

presenteren via module GCalendar Upcoming hans2103 2 september 2013

Slide 21

Slide 21

met Rich Snippets verrijkte code hans2103 2 september 2013

Slide 22

Slide 22

schema.org/MusicGroup <ul itemscope itemtype=”http://schema.org/MusicGroup”> <meta itemprop=”name” content=”Anton Goudsmit”/> <meta itemprop=”url” content=”http://antongoudsmit.nl”/> <meta itemprop=”description” content=”Anton Goudsmit is one of Hollands leading jazzguitarists. Co-founder of and guitarist for the progressive Dutch jazz-acts The Ploctones, Estafest and New Cool Collective. In 2010, he received the Boy Edgar Prize. Source:Last.fm”/> {{#events}} <li itemprop=”event” itemscope itemtype=”http://schema.org/Event”> <meta itemprop=”location” content=”{{location}}”/> <meta itemprop=”startDate” content=”{{date}}”/> {{date}} <br /> <a itemprop=”url” href=”{{{backlink}}}”><span itemprop=”name”>{{title}}</span></a> </li> {{/events}} </ul> {{^events}} {{emptyText}} {{/events}} Direct in PHPMyAdmin verwerken en voorkom dat Joomla code stript. hans2103 2 september 2013

Slide 23

Slide 23

Rich Snippets Testing Tool hans2103 2 september 2013

Slide 24

Slide 24

hans2103 2 september 2013

Slide 25

Slide 25

Connected to my Google+ hans2103 2 september 2013

Slide 26

Slide 26

voeg website toe aan je Google+ hans2103 2 september 2013

Slide 27

Slide 27

template override van com_content haal con_position op uit tabel contact_details hans2103 2 september 2013

Slide 28

Slide 28

Google+ url verwerken in veld Positie hans2103 2 september 2013

Slide 29

Slide 29

Rich Snippets Testing Tool hans2103 2 september 2013

Slide 30

Slide 30

beter resultaat met data-vocabulary.org hans2103 2 september 2013

Slide 31

Slide 31

eenvoudige template override hans2103 2 september 2013

Slide 32

Slide 32

aanklikbaar subcategorie Rich Snippets Testing Tool hans2103 2 september 2013

Slide 33

Slide 33

http://www.ebusiness-unibw.org/tools/grsnippetgen/ hans2103 2 september 2013

Slide 34

Slide 34

handig aangemaakt via GoodRelations hans2103 2 september 2013

Slide 35

Slide 35

nu jij! have fun hans2103 2 september 2013

Slide 36

Slide 36

thank your for your time http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 http://www.flickr.com/photos/trasimac/1217071176