Social Media Optimization With Open Graph Tags

Umut IŞIK

Social Media OptimizationOpen Graph Tags

▪ Social Media

▪ Website Integration

▪ Social View

▪ How to optimize

▪ Sample Page

Agenda

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.

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)

1. Social Media

How do we use?

▪ Directly▪ Personal accounts

▪ Share

▪ Indirectly▪ Website Integration

1. Social Media

Why?

▪ followers

▪ visitors

▪ customers

▪ money ☺▪ fame

2. Website Integration

Old Days

1. SEO

2. Link share

3. Page Rank

2. Website Integration

SEO is dead!

▪ Google displays only 13% organic results

2. Website Integration

Social Media is rising. (Forrester Research)

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

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%

2. Website Integration

Social Media is rising.

▪ Be remarkable on Social Media

2. Website Integration

▪ Social Media Buttons

▪ Social Media Integration (Login, Comments)

▪ Social Media Accounts

2. Website Integration

▪ Loyal visitors share your content▪ Buttons

▪ Using URL directly

2. Website Integration

Share (What happens)▪ Url is shared directly / in text

▪ Social network agent visits the Url

▪ Agent parses meta / content

▪ Social view is created

3. Social View

Social View (How?)▪ HTML is parsed

▪ Title, description and images

▪ Open Graph Tags

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

3. Social View

Open Graph

3. Social View

Basic Open Graph Tags

3. Social View

Tag Descriptionog:title the title of the piece of contentog:image the image that will be shown in the screenshot of the contentog:url the URL of the pageog:description the description will be shown in the screenshot of the piece of

contentog:type the type of object your piece of content isog:site_name the name for the overall site. e.g., "IMDb".

Open Graph Tags For Twitter

3. Social View

Tag Descriptiontwitter:title the title of the piece of contenttwitter:image the image that will be shown in the screenshot of the contenttwitter:description the description will be shown in the screenshot of the piece

of contenttwitter:card the card type of your piece of content is

Twitter Cards

3. Social View

Type DescriptionSummary Card Default Card, including a title, description, thumbnail, and

Twitter account attributionSummary Card with Large Image

Similar to a Summary Card, but offers the ability to prominently feature an image.

Photo Card A Tweet sized photo CardGallery Card A Tweet Card geared toward highlighting a collection of

photosApp Card A Tweet Card for providing a profile of an applicationApp 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 CardProduct Card A Tweet Card to better represent product content

Summary Card

3. Social View

Photo Card

3. Social View

Product Card

3. Social View

Use Open Graphs

If not?▪ Agents tries to find proper data in the page html

▪ No good social view

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

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

4. How To Optimize

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

5. Sample Page

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

5. Sample Page

Social views For Page 1

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

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

5. Sample Page

Sample Page 2

5. Sample Page

Sample Page 2

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

5. Sample Page

Result▪ Page 2 is optimized

▪ Page 2 creates more meaningfull social views

5. Sample Page

https://developers.facebook.com/docs/opengraph

http://ogp.me/

https://dev.twitter.com/docs/cards

Resources