Upload
builtvisible
View
803
Download
3
Tags:
Embed Size (px)
Citation preview
Twitter Card
<meta name="twitter:card" content="summary_large_image"/><meta name="twitter:description" content="Why You Should Learn JSON-LD & Separate Your Data from Your Markup - a helpful post from the team at Builtvisible.com"/><meta name="twitter:title" content="Why You Should Learn JSON-LD & Separate Your Data from Your HTML"/><meta name="twitter:domain" content="Builtvisible : Digital Marketing & SEO Agency"/><meta name="twitter:image:src" content="http://builtvisible.com/wp-content/uploads/2015/06/facebook-instant-articles.png"/><meta name="twitter:creator" content="@richardbaxter"/>
http://builtvisible.com/6-trends-structured-data/
Open Graph - Facebook
<meta property="og:locale" content="en_GB" /><meta property="og:type" content="article" /><meta property="og:title" content="Why You Should Learn JSON-LD & Separate Your Data from Your HTML" /><meta property="og:description" content="Why You Should Learn JSON-LD & Separate Your Data from Your Markup - a helpful post from the team at Builtvisible.com" /><meta property="og:url" content="http://builtvisible.com/6-trends-structured-data/" /><meta property="og:site_name" content="Builtvisible : Digital Marketing & SEO Agency" /><meta property="article:author" content="https://www.facebook.com/richardbaxterseo" /><meta property="article:tag" content="Technical" /><meta property="article:section" content="Research" />…
http://builtvisible.com/6-trends-structured-data/
Open Graph was popularised by FB but is used by many other sites incl
Pinterest (& even Twitter as a fallback)
Very Similar to Schema.org
<html prefix="og: http://ogp.me/ns#">
og:title
og:type (article / video etc)
og:image
og:url
twitter:card
twitter:site
twitter:title
twitter:image
twitter:description
https://dev.twitter.com/cards/markup http://ogp.me/
Summary Cards
The summary_large_image twitter:card property requires a min image size of 280px by 150px, and <
1MB in size
Photo Cards
As of 3rd July this type will be assimilated into the ‘summary card
with large image’ card.
<meta name="twitter:card" content="photo" /><meta name="twitter:site" content="@flickr" /><meta name="twitter:title" content="Mountain sunset" /><meta name="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" /><meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />
Multiple Images<meta name="twitter:card" content= "gallery" /><meta name="twitter:site" content="@flickr" /><meta name="twitter:title" content="Mountain sunset" /><meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" /><meta name="twitter:image0" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" /><meta name="twitter:image1" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" /><meta name="twitter:image2" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />
Will also merge with the large summary card on the 3rd July
Player Cards<meta name="twitter:card" content="player"><meta name="twitter:site" content="@youtube"><meta name="twitter:url" content="http://www.youtube.com/watch?v=L6npfdytkU8"><meta name="twitter:title" content="Best Fails of the Week 1 May 2015 || FailArmy"><meta name="twitter:description" content="FailArmy has received plenty of epic fails in the wake of Cinco de Mayo. Enjoy all of them in this week's best fails of the week! Check out our second channe..."><meta name="twitter:image" content="https://i.ytimg.com/vi/L6npfdytkU8/maxresdefault.jpg"><meta name="twitter:player" content="https://www.youtube.com/embed/L6npfdytkU8"><meta name="twitter:player:width" content="1280"><meta name="twitter:player:height" content="720">
There is an approval process at a @user level for ‘twitter:player’ to
take effect.
Article
<meta property="og:type" content="article" /><meta property="og:title" content="What To Do When Your Link Building Campaign Fails" /><meta property="og:description" content="So, your link building campaign didn't perform as expected -- now what? Columnist Casie Gillette weighs in on how we can learn from our mistakes." /><meta property="og:url" content="http://searchengineland.com/link-building-campaign-fails-222357" /><meta property="og:site_name" content="Search Engine Land" /><meta property="article:publisher" content="https://www.facebook.com/searchengineland" /><meta property="article:section" content="Channel: SEO" /><meta property="article:published_time" content="2015-06-09T10:35:21+00:00" /><meta property="og:image" content="http://searchengineland.com/figz/wp-content/seloads/2015/06/links-broken-fail-ss-1920.jpg" />
Video
<meta property="og:site_name" content="YouTube" /><meta property="og:url" content="http://www.youtube.com/watch?v=L6npfdytkU8" /><meta property="og:title" content="Best Fails of the Week 1 May 2015 || FailArmy" /><meta property="og:description" content="FailArmy has received plenty of epic fails in the wake..." /><meta property="og:image" content="http://i.ytimg.com/vi/L6npfdytkU8/maxresdefault.jpg" /><meta property="og:type" content="video" /><meta property="og:video:url" content="https://www.youtube.com/embed/L6npfdytkU8" /><meta property="og:video:secure_url" content="https://www.youtube.com/embed/L6npfdytkU8" /><meta property="og:video:width" content="1280" /><meta property="og:video:height" content="720" /><meta property="og:video:tag" content="fail" /><meta property="og:video:tag" content="failarmy" />
Facebook Debugger
https://developers.facebook.com/tools/debug/ https://developers.facebook.com/docs/sharing/webmasters
The debugger is excellent, but needs to be given their terrible
documentation.
Twitter Live Preview
https://cards-dev.twitter.com/validator
Twitters documentation is extremely thorough including code examples & snippets, use this as a base for client
work.
Take a look at Slideshare…<meta name="twitter:card" value="player" /><meta name="twitter:site" value="@slideshare" /><meta class="twitter_player" value="https://www.slideshare.net/slideshow/embed_code/key/sarYB81woqBE4C" name="twitter:player" /><meta name="twitter:player:width" value="342" /><meta name="twitter:player:height" value="291" /><meta class="twitter_title" value="Using Twitter for Marketing and Outreach Workshop" name="twitter:title" /><meta class="twitter_image" value="https://cdn.slidesharecdn.com/ss_thumbnails/usingtwitterformarketingandoutreach2015final-150604200712-lva1-app6892-thumbnail-4.jpg?cb=1433782804" name="twitter:image" />
Slideshare have adopted the ‘player’ property to leverage ‘iframe’ content to embed presentations into Tweets.
A little more interactive…
This example was created by advertisers, but is feasible (non-paid) if
we can whitelist the clients Twitter profile for use with ‘player’ and
leverage iframe content.
Interactive elements allowed users to select specific car features without
leaving Twitter.
http://bostinno.streetwise.co/2014/08/27/acura-twitter-cards-ads/
Promote & Install Apps Directly from Twitter (Android & IOS)
https://dev.twitter.com/cards/mobile
<meta name="twitter:app:country" content="US" /><meta name="twitter:app:name:iphone" content="Example App" /><meta name="twitter:app:id:iphone" content="306934135" /><meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef" /><meta name="twitter:app:name:ipad" content="Example App" /><meta name="twitter:app:id:ipad" content="306934135" /><meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef" /><meta name="twitter:app:name:googleplay" content="Example App" /><meta name="twitter:app:id:googleplay" content="com.example.app" /><meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef" />
This is what the mark-up could look like:
<script type="application/ld+json">{ "@context": "http://ogp.me", "@type":"article", "og:locale": "en_GB", "og:title": "Log File Analysis for SEO", "og:description": "Mastered technical SEO and feel like you’d like to stretch your knowledge further? Read this unapologetically technical guide to Log File Analysis...", "og:url": "http://builtvisible.com/log-file-analysis/", "og:site_name": "Builtvisible : Digital Marketing & SEO Agency", "og:image": "http://builtvisible.com/wp-content/uploads/2014/12/log-file-analysis-social.jpg", "og:published_time":"2014-09-15", "og:author": "Daniel Butler"}</script>
<script type="application/ld+json">{ "@context": "http://api.twitter.com/", "@type":"summary", "twitter:title": "Log File Analysis for SEO", "twitter:description": "Mastered technical SEO and feel like you’d like to stretch your knowledge further? Read this unapologetically technical guide to Log File Analysis...", "twitter:url": "http://builtvisible.com/log-file-analysis/", "twitter:site": "@Builtvisible", "twitter:image": "http://builtvisible.com/wp-content/uploads/2014/12/log-file-analysis-social.jpg"}</script>