This document discusses optimizing websites for social media. It covers how social media has become an important way for users to discover websites and how integrating social media features can help drive traffic. It introduces Open Graph tags that allow social networks to understand how to display page content and recommends optimizing tags to create more informative social previews. Sample pages are shown to demonstrate the difference optimized versus non-optimized Open Graph tags can make.

1. Social Media Optimization
Open Graph Tags
Umut IŞIK

2. Agenda
▪ Social Media
▪ Website Integration
▪ Social View
▪ How to optimize
▪ Sample Page

3. 1. Social Media
A group of Internet-based applications that build on the
ideological and technological foundations of Web 2.0, and that
allow the creation and exchange of user-generated content.

4. 1. Social Media
Clasification
1. collaborative projects (Wikipedia)
2. blogs and microblogs (Twitter, Tumblr)
3. content communities (YouTube and DailyMotion)
4. social networking sites (Facebook, Google+)
5. virtual game-worlds (World of Warcraft)
6. virtual social worlds (Second Life)

5. 1. Social Media
How do we use?
▪ Directly
▪ Personal accounts
▪ Share
▪ Indirectly
▪ Website Integration

6. 2. Website Integration
Why?
▪ followers
▪ visitors
▪ customers
▪ money ☺
▪ fame

7. 2. Website Integration
Old Days
1. SEO
2. Link share
3. Page Rank

8. 2. Website Integration
SEO is dead!
▪ Google displays only 13% organic results

9. 2. Website Integration
Social Media is rising. (Forrester Research)

10. 2. Website Integration
Social Media is rising. (Forrester Research)
▪ 54% of consumers find websites through natural search results,
up from 50% in 2011 but still 7% less than in 2010
▪ Social networks are the second-most preferred discovery
resource, with 32% using them in 2012, up from 25% in 2011 and
18% in 2010.
▪ 50% of 18-24 year old and 43% of 24 to 32 year old are using
social media as their main internet discovery resource

11. 2. Website Integration
Social Media is rising. (Forrester Research)
▪ Links are the third important means of website discovery, with
28% saying they found websites from links on other sites, down
from 31% last year.
▪ Just 18% of those surveyed said that they use ads for website
discovery, an improvement from 2011, when paid search was
the least popular form of website discovery, with only 8%

12. 2. Website Integration
Social Media is rising.
▪ Be remarkable on Social Media

13. 2. Website Integration
▪ Social Media Buttons
▪ Social Media Integration (Login, Comments)
▪ Social Media Accounts

14. 2. Website Integration
▪ Loyal visitors share your content
▪ Buttons
▪ Using URL directly

15. 3. Social View
Share (What happens)
▪ Url is shared directly / in text
▪ Social network agent visits the Url
▪ Agent parses meta / content
▪ Social view is created

16. 3. Social View
Social View (How?)
▪ HTML is parsed
▪ Title, description and images
▪ Open Graph Tags

17. 3. Social View
Open Graph
▪ Help people tell rich stories on Facebook from your app through a
structured, strongly typed API.
▪ Agreed as a standard
▪ Used by other social networks

18. 3. Social View
Open Graph

19. 3. Social View
Basic Open Graph Tags
Tag Description
og:title the title of the piece of content
og:image the image that will be shown in the screenshot of the content
og:url the URL of the page
og:description the description will be shown in the screenshot of the piece of
content
og:type the type of object your piece of content is
og:site_name the name for the overall site. e.g., "IMDb".

20. 3. Social View
Open Graph Tags For Twitter
Tag Description
twitter:title the title of the piece of content
twitter:image the image that will be shown in the screenshot of the content
twitter:description the description will be shown in the screenshot of the piece
of content
twitter:card the card type of your piece of content is

21. 3. Social View
Twitter Cards
Type Description
Summary Card Default Card, including a title, description, thumbnail, and
Twitter account attribution
Summary Card with
Large Image
Similar to a Summary Card, but offers the ability to
prominently feature an image.
Photo Card A Tweet sized photo Card
Gallery Card A Tweet Card geared toward highlighting a collection of
photos
App Card A Tweet Card for providing a profile of an application
App Installs and Deep-
Linking
An extension to any Card that provides app download and
deep linking
Player Card A Tweet sized video/audio/media player Card
Product Card A Tweet Card to better represent product content

22. 3. Social View
Summary Card

23. 3. Social View
Photo Card

24. 3. Social View
Product Card

25. 4. How To Optimize
Use Open Graphs
If not?
▪ Agents tries to find proper data in the page html
▪ No good social view

26. 4. How To Optimize
Obey the rules
▪ Max character limits on text values (title,description)
▪ Images with proper resolution and file size
▪ Check the rules from documantation pages of Social Networks

27. 4. How To Optimize
Do not copy meta tags
▪ Page title may not be proper for social view
▪ Description in meta tags is for search engines
▪ You can create custom images for social view

28. 5. Sample Page
Sample Page 1
▪ Same product page from different sites
▪ NEX-3NL
▪ www.sony.com.tr and www.ebay.com
▪ Compare Open graph tags and social views

29. 5. Sample Page
Sample Page 1
▪ http://www.sony.com.tr/product/nex-3/nex-3nl

30. 5. Sample Page
Social views For Page 1

31. 5. Sample Page
Sample Page 1
▪ og:title is the same as page title
▪ og:description is text formatted with «prodText» class
▪ No tags for Twitter-Cards
▪ No optimization for social view

32. 5. Sample Page
Sample Page 2
▪ http://www.ebay.com/itm/Sony-alpha-NEX-3NL-16-1-MP-Digital-
Camera-w-ED-Aspherical-16-50mm-lens-Black-/261324246448?
pt=Digital_Cameras&hash=item3cd8238db0

33. 5. Sample Page
Sample Page 2

34. 5. Sample Page
Sample Page 2

35. 5. Sample Page
Sample Page 2
▪ og:title is different from page title
▪ og:description gives information about product status
▪ Twitter product card is used

36. 5. Sample Page
Result
▪ Page 2 is optimized
▪ Page 2 creates more meaningfull social views

37. Resources
https://developers.facebook.com/docs/opengraph
http://ogp.me/
https://dev.twitter.com/docs/cards