wordcamp manchester 2014 - how to make your website more shareable
Post on 07-Jul-2015
516 Views
Preview:
DESCRIPTION
TRANSCRIPT
Making your site more Sharable
Carolyn Jones - Webdurance
@carolynlyn
What is sharing ?
Follow, Share, Like+1, Up Vote, Befriend
What can you control when sharing ?
Facebook share
• Image(s)
• Title
• Description
Prefill your tweets
• People can change the tweet but many won’t
• Include hashtags if relevant
• Make sure you include your twitter handle!
Twitter Cards
Lots of types of Twitter Card
• Summary Cards
• Summary Cards with Large Images
• Photo Card
• Gallery Card
• App Card
• Player Card
• Product Card
• Lead Generation Card (Ad Platform Only)
• Website Card (Ad Platform Only)
Twitter Cards - Summary Card
• Default Card, including a title, description, thumbnail, and Twitter account attribution.
Twitter Cards - Summary Card w/ Large Image
• Similar to a Summary Card, but offers the ability to prominently feature an image.
Twitter Cards - Photo Card
• Photo Card puts focus on the image
Twitter Cards – Gallery Card
• Geared toward highlighting a collection of photos.
Twitter Cards – Video Card
• A Tweet sized video/audio/media player Card. Approval not instant, stringent requirements
Google+
Google+ Share
• Image
• Title
• Description (only with large image)
Pinterest Rich Pins
Rich Article Pins
• Show extra info on pins from your site
Rich Product Pins
Recipe Rich Pins
Movie Rich Pins
Place Rich Pins
• Title
• Description
• Image
How do you control it ?
Page Title & Meta Description
Open Graph
Open Graph Example
• <meta property="og:locale" content="en_US" />
• <meta property="og:type" content="article" />
• <meta property="og:title" content="This is a page title -it's usually about 70 characters long" />
• <meta property="og:description" content="This description will be used on facebook, it can be quite long actually up to 297. Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo velmaleficia?" />
• <meta property="og:url" content="http://ca.rolyn.co.uk/just-testing-2/" />
• <meta property="og:site_name" content="ca.rolyn.co.uk" />
• <meta property="og:image" content="http://ca.rolyn.co.uk/content/uploads/2014/06/1200-600-sketch.jpg" />
Schema.orgMicroFormat
Google+
• Extracts data from page in order of precedence.
• Schema.org microdata
• Open Graph protocol
• Meta "title" and "description" tags
• Best guess from page content
https://developers.google.com/+/web/snippet/
Schema Example
<body itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p></body>
Set schema in Head
<html itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="Shiny Trinket">
<meta itemprop="description" content="Shiny trinkets are shiny">
<meta itemprop="image" content="{image-url}" >
Or in body
Twitter CardsMarkup
Twitter Cards Markup
• <meta name="twitter:title" content="Shiny Trinket">
• <meta name="twitter:description" content="Shiny trinkets are shiny!">
• <meta name="twitter:image:src" content="{image-url}">
Set in Head
Plugins
YoastSEO & All in One SEO Open Graph
• Both Support OpenGraph Data automatically
Yoast’s WordPress SEO Settings
Facebook > add open graph meta: ticked
Yoast’s WordPress SEO Settings
Twitter > add Twitter card meta data: unticked
Yoast’s WordPress SEO Settings
Google+ > add G+ specific meta: ticked
Yoast’s WordPress SEO Settings
Post > General > Fill in Title and Description
SEO title: Facebook, Google+, LinkedIn, Pinterst Rich Pins & search engines
Yoast’s WordPress SEO Settings
Post > Social > Fill in Facebook & G+ Description
Image: 1200 x 600px works well (Facebook desc is used on Google+, LinkedIn, Pinterest)
JM Twitter Cards Plugin
• Supports: Summary, Summary Large Photo, Photo, Product, Player, Gallery, Application
JM Twitter Cards Plugin Settings
General > Open Graph: No
JM Twitter Cards Plugin Settings
Custom Fields > set custom field title & description
JM Twitter Cards Plugin Settings
Create matching custom fields > fill in for each post
JM Twitter Cards Plugin Settings
Image: square images work well
e.g. 560 x 560 px
Post Title
• Post title used by most Twitter buttons by default
Simple Share Buttons Adder Plugin
• Supports: adding social buttons in range of styles
• Adding default custom text when links are shared
Simple Share Buttons Adder Settings
In action
Google+
• Page title (or open graph title if specified)
• Meta Description (or open graph description if specified)
ManageWP.org
Buttons
Official Buttons vs Unofficial Buttons
WordPress Sharing Buttons• Included in JetPack (or JetPack Sharing Plugin)
Other Share Buttons:
• Add This
• AddtoAny
• Share This
• Simple Share Buttons Adder
Encouraging Shares
Tweet / share this
PullQuote
Quotable
SumoMe
SumoMe
Share Link Generator
http://www.sharelinkgenerator.com/
Social paywalls
Pay with a Tweet
Pay with a Tweet
Social Locker
• $22
Social Locker
• $22
Get ‘em while they’re hot!
Redirect Commenters
Say thanks & while you’re here …
• Redirect commenters to a thank you page
• Include a CTA to follow / like / connect on G+
Don’t Make Assumptions
Show relevant networks
Testbuttons &locations
Preview, Debug, Validate
Twitter Preview, Validate & Apply
https://dev.twitter.com/docs/cards/validation/validator
Facebook Debug
https://dev.twitter.com/docs/cards/validation/validator
Pinterest Validate & Approve
https://developers.pinterest.com/rich_pins/validator/
Google+ - get snippet
• https://developers.google.com/+/web/snippet/
Thanks!
Find links to resources mentioned at: www.webdurance.co.uk/wordcamp-Manchester-2014/
Find me on twitter @carolynlyn
top related