SEO KNOWLEDGE SHARING: SOCIAL META-TAGS
A presentation at Mediacom Lectorium in May 2018 in London, UK by Anton Surov
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!
