WordCamp Manchester 2014 - How to make your website more shareable

Making your site
more Sharable
Carolyn Jones - Webdurance
@carolynlyn

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!

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+ Share
• Image
• Title
• Description (only with large
image)

Rich Article Pins
• Show extra info on pins from your site

Linkedin
• Title
• Description
• Image

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 vel
maleficia?" />
• <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/12
00-600-sketch.jpg" />

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 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

YoastSEO & All in One SEO Open Graph
• Both Support OpenGraph Data automatically

Yoast’s WordPress SEO Settings
Facebook > add open graph meta: ticked

Twitter > add Twitter card meta data: unticked

Google+ > add G+ specific meta: ticked

Post > General > Fill in Title and Description
SEO title: Facebook, Google+, LinkedIn, Pinterst Rich Pins & search engines

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

Custom Fields > set custom field title & description

Create matching custom fields > fill in for each post

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

LinkedIn
• Page title (or open
graph title if specified)
• Meta Description (or
open graph description
if specified)

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

Share Link Generator
http://www.sharelinkgenerator.com/

Get ‘em while
they’re hot!

Say thanks & while you’re here …
• Redirect commenters to a thank you page
• Include a CTA to follow / like / connect on G+

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

WordCamp Manchester 2014 - How to make your website more shareable

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to WordCamp Manchester 2014 - How to make your website more shareable

Similar to WordCamp Manchester 2014 - How to make your website more shareable (20)

Recently uploaded

Recently uploaded (20)

WordCamp Manchester 2014 - How to make your website more shareable

Editor's Notes