1. Web Page Optimization for
Facebook and Beyond
Or: How to Combine the Open Graph Protocol with GoodRelations in RDFa
Prof. Dr. Martin Hepp
E-Business and Web Science Research Group
http://www.unibw.de/ebusiness/

2. Facebook Open Graph Protocol
• Specification for
additional HTML
markup so that
1
Facebook user’s can 2
recommend your
page and its content I like this
Starbuck's
to their peers.
My Friends (Social Graph)
store!
Peter Mary
Me Paul
06.05.2010 2

3. How Does It Work?
• Add a few extra lines to the header of your
Web page source code.
Page Source Code (HTML)
06.05.2010 3

4. Why Should I Care?
• The embedded information will be used by
Facebook to know the topic of the page, plus a
few additional facts.
– “The page describes a café.”
– Geo positions of locations mentioned on the page.
• So Facebook users can directly point their
friends to stores, products, movies, etc., instead
of just sharing links.
06.05.2010 4

5. But…
06.05.2010 5

6. …when you take the time to touch
your your Web page headers for
Facebook‘s new feature, anyway, ...
06.05.2010 6

7. …you should also insert 10 – 20
lines of additional mark-up to the
body of the page about ...
06.05.2010 7

8. Store Info Products & Services Price & Payment

9. … using GoodRelations in RDFa.
06.05.2010 9

10. This will have
at least three nice effects:
06.05.2010 10

11. #1
More powerful Facebook
applications
(because they can extract & recombine this rich information)
06.05.2010 11

12. More Powerful Facebook Applications
1
Open Graph API
provides social aspect
of recommendations.
Your Friend's Favorite Cafés
Starbucks, closes 10.30 p.m.
Miller's, closes 7.15 p.m.
2
GoodRelations markup provides fine-
grained data about available products, Requirements
services, payment options, opening
Accepts MasterCard ON
hours, etc.
Wifi ON
Has Vegetarian Food ON
06.05.2010 12

13. #2
Enhanced Rendering in Yahoo
(because Yahoo honors and displays this rich information, if
available)
06.05.2010 13

14. Yahoo Example
06.05.2010 14

15. #3
Enhanced Ranking in Google
(because Google rewards such rich mark-up as good content
with a higher rank in the organic search results)
06.05.2010 15

16. Dream Team: Open Graph + GoodRelations
Page Source Code (HTML)
Basic info about your page
Header: Facebook Open Graph Markup Detailed info about your
business, e.g.
• Products & services,
• Opening hours,
• Prices,
Body: GoodRelations Markup
• Payment,
• Discounts,
and a lot more!
06.05.2010 16

17. GoodRelations Example: Camera
http://www.ebusiness-unibw.org/wiki/GoodRelationsQuickstart
06.05.2010 17

18. Is it difficult?
06.05.2010 18

19. No.
Simply copy-and-paste the GoodRelations HTML patterns into
your page. The exact position does not matter.
http://www.ebusiness-unibw.org/wiki/GoodRelationsQuickstart
06.05.2010 19

20. Will it make my page slow?
06.05.2010 20

21. No.
The additional markup will be just 10 – 20 lines, 1 – 3 KB per
pages. You will not even notice the payload.
http://www.ebusiness-unibw.org/wiki/GoodRelationsQuickstart
06.05.2010 21

22. Is it expensive?
06.05.2010 22

23. No.
GoodRelations is free.
It‘s available under a very liberal Creative Commons license.
http://www.ebusiness-unibw.org/wiki/GoodRelationsQuickstart
06.05.2010 23

24. So when you update your Web
templates to make them ready for
Facebook’s Open Graph API,…
06.05.2010 24

25. …make sure you also make them
ready for GoodRelations.
It will pay out. It’s simple.
And BestBuy is already doing it with
remarkable results.
06.05.2010 25

26. Please Follow-up:
http://www.ebusiness-unibw.org/wiki/GoodRelationsQuickstart
Twitter: mfhepp
Skype: mfhepp

27. Prof. Dr. Martin Hepp
Chair of General Management and E-Business
Universitaet der Bundeswehr Muenchen
Werner-Heisenberg-Weg 39
D-85579 Neubiberg, Germany
Phone: +49 89 6004-4217
Fax: +49 89 6004-4620
http://www.unibw.de/ebusiness/
http://purl.org/goodrelations/
mhepp@computer.org
27