Post on 19-Feb-2017
Agile Web Development Liip.ch
–
May 2016
CONTENT EXPERIENCE OPTIMISATION ON SEARCH ENGINES AND SOCIAL MEDIAWebmardi Talks – Benoit Pointet, Liip AG
SEO CRAWLING > INDEXING > APPEARANCE
SMO SHARING > CRAWLING > APPEARANCE
ONE CONTENT MANY APPEARANCES
FEATURING/ENHANCING CONTENTS ON GOOGLE SEARCH
WEB PAGEtitle URL body
title URL snippet
For all contents.
How to implement ?
- URL : from the page URL
- …
ORGANIC WEB RESULT
META TITLE AND DESCRIPTION
Title (~60 chars):
- title : ~ 55 first chars from <title> tag
- no website’s name rep.
- don’t shout with caps
Snippet (~155 chars):
- <meta name="description" …>
- else first few words from the body
- always provide a description
- don’t repeat title
- don’t stuff with keywords
ORGANIC + DATE
For content with timely pertinence: news, articles, blogposts, FAQs, discussions, guides, manuals, tips ’n’ tricks …
How to implement?
- no official documentation
- provide publication date cue in XML Sitemap, URL, body, …
XML SITEMAP
A way to give informations about your contents to (old) bots.
1 or many XML files containing a long list of infos about pages, videos or images.
ORGANIC + BREADCRUMB
Replace URLs with clear source & categorical informations.
How to implement ?
- schema.org
- no www
- every part clickable
- many breadcrumbs
SCHEMA.ORG?
Yet another way to give informations about your contents to (search) bots.
Yet this time, the data schema can be implemented in three different formats: JSON, RDFa, Microdata, embedded in the page header or its content.
The JSON approach is probably cleaner and less "breakable".
Don’t mix! don’t duplicate.
ORGANIC + SITELINKS
For most-clicked contents on a website.
How to implement ?
- Google will decide … on navigational searches.
- remove undesired ones in Google Search Console.
ORGANIC + SITELINKS SEARCH BOX
To initiate an on-site search directly from Google.
How to implement ?
- schema.org
ORGANIC + RICH SNIPPET FOR EVENTS
For concerts, festivals, conferences, sports events, webmardis, … and tickets!
How to implement ?
- schema.org
- start location’s name with "city (country-code)"
EVENTS CAROUSEL
Summary of coming venues for an artist / a show …
How to implement ?
- based on events rich snippet data
- google decides on when to show them as carousel
ORGANIC + RICH SNIPPET FOR PRODUCTS
For anything that one can buy.
How to implement ?
- schema.org
- stock information over price
- provide price & stock information
ORGANIC + RICH SNIPPET FOR RECIPES
For recipes, with ratings, duration, …
How to implement ?
- schema.org
ORGANIC + VIDEO SNIPPET
Provide visual cues for video content: cover and play icon.
How to implement ?
- schema.org
- XML Sitemap
FEATURED VIDEO
To feature some high-traffic videos on SERP.
How to implement ?
- same as video snippet
- google decides on which videos to feature
ORGANIC + NEWS SNIPPET
To display news (and related news) with focus on freshness and source.
How to implement?
- schema.org
- enter "Google News program" (AMP, First click free policy)
- explicit source: "Closer Mag"
ORGANIC APP
To feature apps as search results.
How to implement
- schema.org
ORGANIC ANSWERS
To feature answers to FAQs.
How to implement
- google decides what paragraphs on the answers best answer commonly googled questions, in a discussable manner …
FEATURE BOXES
To feature knowledge (facts & stats) on a topic.
aka Knowledge Graph.
How to implement
- schema.org (ex: aggregateRating from allocine)
- XML Sitemap
- "featured knowledge" o#en provided to Google Search non-organically through closed partnerships with reliable data sources.
FEATURED BRANDS
Improve your brand appearance in the knowledge graph.
How to implement
- schema.org markup on your website
- entries in wikipedia and wikidata
- yet, your brand go$a be important enough to appear on wikipedia
ENHANCING SHARED CONTENTS ON FACEBOOK
FB SHARED ARTICLES
Featuring an article / news on facebook.
How to implement
- opengraph metadata
- same rules as for Google news
- don’t provide author if not pertinent
OPENGRAPH
Yet another way to give informations about your contents to (social) bots.
De facto standard for content metadata on social media for videos, music, articles, persons, …
FB SHARED VIDEOS
Featuring an (external video) on facebook.
How to implement
- opengraph metadata
FEATURING/ENHANCING CONTENTS ON TWITTER
TW SUMMARY CARDS
Featuring articles, videos, images, or products on twi"er.
How to implement
- twi$er card metadata
Different types of cards existed before, they now are all merged into the "summary card" and "summary with large image" types.
TWITTER CARD
Yet another way to give informations about your contents to twi"er bots.
FEATURING/ENHANCING CONTENTS ON PINTEREST
PINTEREST ARTICLE
Featuring an article on pinterest.
How to implement
- opengraph metadata
- schema.org
PINTEREST RECIPE
Featuring a recipe on pinterest.
How to implement
- schema.org
- microformats
- list out ingredients and steps
- provide preparation time
- explicit if gluten-free …
PINTEREST PLACE
Featuring a place on pinterest.
How to implement
- opengraph
- schema.org
- give country, region context
KEY TAKEAWAYS
KEY TAKEAWAYS
On the content level:
- Your contents will travel, let it do so.
- Don’t repeat yourself: use every element of a search / social snippet accordingly to its original purpose.
- Try to fulfill the user needs without having him opening your website.
- Find out structured data opportunities.
KEY TAKEAWAYS
On the technical level:
- Markup with opengraph to ensure best experience on Facebook and a large panel of social networks.
- Markup with schema.org (structured data) to provide a great search experience and get your contents pop-out from the crowd.
- beware of penalties when doint it wrong!
- Still invest some efforts in your sitemap.xml, rel=alterate etc.
- Bye bye microformats, Dublin Core,
KEY TAKEAWAYS
On the technical level:
- Markup with opengraph to ensure best experience on Facebook and a large panel of social networks.
- Markup with schema.org (structured data) to provide a great search experience and get your contents pop-out from the crowd.
- Still invest some efforts in your sitemap.xml, rel=alterate etc.
- Bye bye microformats, Dublin Core, …
THANK YOU