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

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

Facebook share

• Image(s)

• Title

• Description

Twitter

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

Linkedin

• 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


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

In action

Google+

Facebook

Twitter

LinkedIn

• 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

Share Link Generator

http://www.sharelinkgenerator.com/

Social paywalls

Pay with a Tweet

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

http://www.webdurance.co.uk/wordcamp-Manchester-2014/

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

Top Related