An Introductory Look at Social Mark-Up
•Télécharger en tant que PPTX, PDF•
4 j'aime•2,354 vues
Each week at Builtvisible the teams get together for a group training session. This week we took a look at the basic fundamentals of social mark-up, what it is and why it exists, some of the different types, basic schema & examples, methods of testing & validation, as well as a look ahead to what this mark-up could look like in the future.
Recommandé
Contenu connexe
Similaire à An Introductory Look at Social Mark-Up
Similaire à An Introductory Look at Social Mark-Up (20)
Plus de Builtvisible
Plus de Builtvisible (20)
Dernier
Dernier (7)
An Introductory Look at Social Mark-Up
- 1. SOCIAL MARK-UP Daniel Butler Head of SEO daniel@builtvisible.com
- 2. You’ve probably heard of it, but what is social mark-up really?
- 3. Forms of structured data for content in the social graph
- 4. 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/
- 5. 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)
- 7. 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/markuphttp://ogp.me/
- 8. Lets look at some examples
- 10. Summary Cards The summary_large_image twitter:card property requires a min image size of 280px by 150px, and < 1MB in size
- 11. 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/118583494 53_e3f18e5881_z.jpg" /> <meta name="twitter:url" content="https://www.flickr.com/photos/reza- sina/11858349453/" />
- 12. 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_e 3f18e5881_z.jpg" /> <meta name="twitter:image1" content="http://farm8.staticflickr.com/7334/11858349453_e 3f18e5881_z.jpg" /> <meta name="twitter:image2" content="http://farm8.staticflickr.com/7334/11858349453_e 3f18e5881_z.jpg" /> Will also merge with the large summary card on the 3rd July
- 13. 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.
- 14. Facebook
- 15. 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" />
- 16. 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" />
- 17. Test, validate & experiment
- 18. 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.
- 19. 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.
- 20. 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/sarYB81w oqBE4C" 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/usingtwitterform arketingandoutreach2015final-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.
- 21. 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/
- 22. Social - App Deep Linking
- 23. 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/5149e249222f9e60 0a7540ef" />
- 24. Looking to the future with JSON-LD
- 25. 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>
- 26. ANY QUESTIONS? Daniel Butler Head of SEO daniel@builtvisible.com