SEO KNOWLEDGE SHARING: SOCIAL META-TAGS

WHAT ARE SOCIAL META-TAGS?

WHAT ARE SOCIAL META-TAGS? Social media meta tags are HTML tags that allow you to make the most out of the content you share from your site. You can determine what information is displayed in the post on Twitter, Facebook, Pinterest and beyond. If your posts, tweets and pins show the right information and are neatly organized, they are much more likely to get more engagements and re-shares.

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: 27,187,855 websites use OG protocol http://ogp.me/

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: 27,187,855 websites use OG protocol http://ogp.me/

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: 27,187,855 websites use OG protocol http://ogp.me/

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: 27,187,855 websites use OG protocol http://ogp.me/

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: Twitter Cards: 27,187,855 websites use OG protocol http://ogp.me/ 8,355,895 websites use Twitter Cards https://cards-dev.twitter.com

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: Twitter Cards: 27,187,855 websites use OG protocol http://ogp.me/ 8,355,895 websites use Twitter Cards https://cards-dev.twitter.com

TYPES A littleOF history SOCIAL of international META-TAGS SEO Open Graph: Twitter Cards: Schema.org: 27,187,855 websites use OG protocol http://ogp.me/ 8,355,895 websites use Twitter Cards https://cards-dev.twitter.com 589,380 results use schema.org/Article http://schema.org/Article

TYPES A littleOF history SOCIAL of international META-TAGS SEO Schema.org: 589,380 results use schema.org/Article http://schema.org/Article

TYPES A littleOF history SOCIAL of international META-TAGS SEO Schema.org: 589,380 results use schema.org/Article http://schema.org/Article

HOW TO USE: OPEN GRAPH

OPEN GRAPH http://ogp.me/ Supported by: Implement with: Debugger: https://developers.facebook.com/tools/debug/ Debugger2: http://iframely.com/debug

LET’S DO IT TOGETHER Bad Example: Good Example:

LET’S DO IT TOGETHER <head> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”> <meta property=”og:title” content=”Emotional Trumps Rational - What can brands learn? /> <meta property=”og:description” content=”After one of the biggest shocks in global politics, we’ve turned our attentions to extracting some brand lessons about winning the hearts of a nation.” /> <meta property=”og:type” content=“Article” /> <meta property=”og:image” content=”http://mediacombeyondadvertising.com/wp-content/uploads/ 2016/11/trump_header.png” /> <meta property=”og:image:width” content=”1200 ” /> <meta property=”og:image:height” content=”627” /> <meta property=”og:url” content=”http://mediacombeyondadvertising.com/emotional-trumps-rational/” /> </head>

LET’S DO IT TOGETHER Bad Example: More Info / Types Good Example: http://ogp.me/

HOW TO USE: TWITTER CARDS

TWITTER CARDS https://dev.twitter.com/cards/overview Supported by: Implement with: Validator: https://cards-dev.twitter.com/validator Debugger: http://iframely.com/debug

TWITTER CARDS: TYPES Summary Card: https://dev.twitter.com/cards/types/summary

TWITTER CARDS: TYPES Summary Card Large Image: https://dev.twitter.com/cards/types/summary

TWITTER CARDS: TYPES App Card: https://dev.twitter.com/cards/types/app

TWITTER CARDS: TYPES Player Card Example: https://dev.twitter.com/cards/types/player Need to be validated: https://dev.twitter.com/cards/types/player

LET’S DO IT TOGETHER Bad Example: Good Example:

LET’S DO IT TOGETHER <head> <meta name=”twitter:card” content=“summary_large_image” /> <meta name=”twitter:site” content=”@thesun”> <meta name=”twitter:creator” content=”@jeremybock”> <meta name=”twitter:title” content=”Trump lashes out at ex-FBI chief “> <meta name=”twitter:description” content=”DONALD Trump has blasted sacked FBI director James Comey – claiming he “lost the confidence” of Washington. President…”> <meta name=”twitter:image” content=”https://www.thesun.co.uk/wpcontent/uploads/2017/05/hd-composite-trumpcomey.jpg?strip=all&quality=100&w=750&h=500&crop=1”> </head>

LET’S DO IT TOGETHER Bad Example: More Info / Types Good Example: https://dev.twitter.com/cards/getting-started

TWITTER ANALYTICS More Info: https://business.twitter.com/en/ help/campaign-measurementand-analytics/twitter-cardanalytics-dashboard.html

HOW TO USE: SCHEMA.ORG – RICH PINS

SCHEMA.ORG – RICH PINS http://schema.org/ Supported by: Implement with: Validator: https://developers.pinterest.com/tools/url-debugger/ Debugger: http://iframely.com/debug Debugger: https://search.google.com/structured-data/testing-tool

RICH PINS - TYPES Article Pins https://developers.pinterest.com/docs/richpins/articles/

RICH PINS - TYPES Product Pins https://developers.pinterest.com/docs/richpins/products/

RICH PINS - TYPES Product Pins https://developers.pinterest.com/docs/richpins/recipes/

LET’S DO IT TOGETHER Bad Example:

LET’S DO IT TOGETHER <head> <meta name=”description” content=”Everyone else is paying attention to other stuff.”> </head> <div> <h1>You’re Too Focused on What You’re Focused On</h1> <p>by Gray Matter</p> <time>APRIL 29, 2017</time> <img src=”https://static01.nyt.com/images/2017/04/30/opinion/sunday/30gr ay/30gray-master768.jpg” alt=”” class=”media-viewer-candidate”/> </div>

LET’S DO IT TOGETHER <head itemscope itemtype=”http://schema.org/Article> <meta itemprop=”description” name=”description” content=”Everyone else is paying attention other stuff.” /> </head>

<div itemscope itemtype=”http://schema.org/Article > <h1 itemprop=“headline” > You’re Too Focused on What You’re Focused On </h1> <p itemprop=“author”> by Gray Matter </p> <time itemprop=”datePublished” > APRIL 29, 2017 </time> <img itemprop=“image “src=”https://static01.nyt.com/images30gray-master768.jpg” /> </div> to

LET’S DO IT TOGETHER Bad Example: More Info / Types Good Example: http://schema.org/Article

CHEAT-SHEET

YOU: THANK YOU!