Choose Your Own Adventure: SEO For Web Developers | Unified Diff

53
SEO For Web Developers CHOOSE YOUR OWN ADVENTURE YOU’RE THE STAR OF THE STORY! CHOOSE FROM 12 EXCITING TOPICS! BY STEVE MORGAN

Transcript of Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Page 1: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

SEO For Web Developers

CHOOSE YOUR OWN ADVENTUREYOU’RE THE STAR OF THE STORY! CHOOSE FROM 12 EXCITING

TOPICS!

BY STEVE MORGAN

Page 2: Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Page 3: Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Page 4: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav

Page 5: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav Me

Page 6: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav Me

Page 7: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav Meso seo

Page 8: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav Meso seo

much optimise

Page 9: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gav Meso seo

much optimise

wow

Page 10: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Gave Meso seo

much optimise

wow

Page 12: Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Page 14: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

3 Main Areas of SEO

•1) Off-site (links)

•2) On-site – copy

•3) On-site – technical

Page 15: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

3 Main Areas of SEO

•1) Off-site (links)

•2) On-site – copy

•3) On-site – technical

Page 16: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Facebook Open

Graph & Twitter Cards

Titles & MetadataBest Practice

Webmaster Tools

Status Codes / RedirectsBest Practice

URLs Best Practice

Canonical-isation

URL Parameters

Robots Commands

Google+ Authorship & Publisher

hreflang (International SEO)

Rich Snippets, e.g. Schema.org

Pagination, aka

rel="next"/"prev"

Facebook Open Graph & Twitter Cards

Page 17: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Titles & Metadata Best Practice• Page Title:• Now determined by pixel width, not character limit (but still

about 60-ish)• Text is bigger following Google’s recent redesign:

• Make them unique site-wide• [Source: http://

moz.com/blog/new-title-tag-guidelines-preview-tool]

Page 18: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Titles & Metadata Best Practice• Meta description:• 155-160 characters – Google truncates the rest (similar to title

tag)• Google may not use it… Case in point:

• …Or Google may mix part of the meta description with a snippet from the page:http://seono.co.uk/2012/08/05/google-showing-combination-of-meta-description-body-snippet-in-serps/• Make them unique site-wide

Page 19: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

EndReturn

Titles & Metadata Best Practice• Meta keywords:

• …

• Don’t bother (seriously…!)• Google ignores it• If Yahoo!, Bing, etc. care, it’s not much• Works against you – competitors can see what keywords are

important to you…

Page 20: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Webmaster Tools• Google Webmaster Tools• Submitting XML sitemaps• Discovering 404 pages• Seeing if you’re affected by

a manual penalty• Setting URL parameters• Demoting Sitelinks• Requesting URL removals• “Fetch as Google”• Restore ‘dropped’ links

quickly• And so much more…!

Page 21: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Webmaster Tools• Bing Webmaster Tools• …sucks! LOL (No, really.)

EndReturn

Page 22: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Status Codes / Redirects Best Practice

• Redirects• Put simply:

301s = GOOD302s = BAD!

• More info here: http://moz.com/learn/seo/redirection

Page 23: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Status Codes / Redirects Best Practice

• Soft 404s• http://seono.co.uk/2014/04/23/4-examples-of-soft-404s-on-big-

websites/• When your Page

Not Found pageisn’t a 404…• …So Google

indexes it.

• [Server headerchecker tool link]EndReturn

Page 24: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

URLs Best Practice

Page 25: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

URLs Best Practice• Other factors:

• Dashes > Underscores

• all lowercase > Capitalisation Throughout

• Feel free to remove the file extension (e.g. .html at the end)

• Therefore…

domain.com/example-page > domain.com/Example_Page.htm

Page 26: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

URLs Best Practice

• [Source: http://moz.com/learn/seo/url]

EndReturn

Page 27: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Canonicalisation<link rel="canonical" href="http://example.com/blog" />

• [Source: http://moz.com/learn/seo/canonicalization]

Page 28: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Canonicalisation• Useful for:• www. vs. non-www.• http:// vs. https://• Duplicate homepage (e.g. www.domain.com vs.

www.domain.com/index.htm)• With and without a slash at the end (e.g. /about-us vs. /about-

us/)• Search parameters (e.g. …?color=blue)• Referral parameters

(e.g. …?utm_source=twitter&utm_medium=profile&utm_campaign=website)

• Be careful not to:• Canonicalise everything into the homepage• Canonicalise a sub-domain into the main domain

EndReturn

Page 29: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

URL Parameters

• [Source: https://docs.google.com/presentation/d/1xWy5TOkB4rwoUHXFPgwVMgl2Op9PayZOWa5wdW7ZB-o]

• Search parameters (e.g. …?color=blue)• Referral parameters

(e.g. …?utm_source=twitter&utm_medium=profile&utm_campaign=website)

Page 30: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

URL Parameters• In Google Webmaster Tools:• https://www.google.com/webmasters/tools/crawl-url-parameter

s

EndReturn

Page 31: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Robots Commands• Remove a page from search engines (more effective than

robots.txt):<meta name="robots" content="noindex"/>

• Some other robots commands:• NOFOLLOW = prevents SE bots from following any links on

the page• NOARCHIVE = prevents SEs from showing a cached copy• NOSNIPPET = prevents SEs from showing a description alongside

the result• NOODP = blocks the Open Directory Project description of the

page from being used in the description• Can be combined (e.g. "noindex,nofollow")• [Source: http://

searchengineland.com/meta-robots-tag-101-blocking-spiders-cached-pages-more-10665]

EndReturn

Page 32: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Facebook Open Graph & Twitter Cards

• Facebook Open Graph meta tags:

• [Source: http://blog.kissmetrics.com/open-graph-meta-tags/]

Page 33: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Facebook Open Graph & Twitter Cards

• Facebook Open Graph meta tags:

• [Source: http://moz.com/blog/meta-data-templates-123]

<!-- Open Graph data --> <meta property="og:title" content="Title Here" /> <meta property="og:type" content="article" /> <meta property="og:url" content=" http://www.example.com/" /><meta property="og:image" content=" http://example.com/image.jpg" /><meta property="og:description" content="Description Here" /> <meta property="og:site_name" content="Site Name, i.e. Moz" /> <meta property="fb:admins" content="Facebook numeric ID" />

Page 34: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Facebook Open Graph & Twitter Cards

• Twitter Card meta tags:

• [Source: http://blog.kissmetrics.com/open-graph-meta-tags/]

Page 35: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Facebook Open Graph & Twitter Cards

• Twitter Card meta tags:

• [Source: http://moz.com/blog/meta-data-templates-123]

<!-- Twitter Card data --><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@publisher_handle"><meta name="twitter:title" content="Page Title"><meta name="twitter:description" content="Page description less than 200 characters"><meta name="twitter:creator" content="@author_handle"><-- Twitter Summary card images must be at least 200x200px --><meta name="twitter:image" content=" http://www.example.com/image.jpg">

EndReturn

Page 36: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Google Authorship, a.k.a. rel="author"• Adding your face to Google’s search results:

• Benefits:• No immediate ranking benefit* (yet), but…• It’s eye-catching – increased click-through rate• …Especially if you’re well-known in your industry• * Personalisation – if you follow someone, you may see them

higher(?)

Page 37: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Google Authorship – three ways to implement (Step 1):• 1) In the <head> (on any articles you’ve written)

<link rel="author" href="https://plus.google.com/109807087957970967076"/>

• 2) Add a parameter to an in-page link

<a href="https://plus.google.com/109807087957970967076?rel=author">Steve Morgan</a>

• 3) Verify your email• No longer an option…?• Clunky as hell anyway…

Page 38: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Google Authorship – three ways to implement (Step 2):• Add the site to your Google+ profile’s ‘Contributor to’ section

(which is found under the Links sub-section of the About section)

My sites

Local societyNon-SEO

guest postSEO social media site

Old employer’s blog

SEO guest posts

Page 39: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Test it – http://

www.google.com/webmasters/tools/richsnippets

Page 40: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Google Publisher, a.k.a. rel="publisher"• Equivalent for Google+ Brand pages for branded searches…

Page 41: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Google Publisher – two ways to implement:• 1) In the <head> (homepage only)

<link rel="publisher" href="https://plus.google.com/109733829658465862616"/>

• 2) On-page? (possibly new – only just spotted)

<a href="https://plus.google.com/112544075040456048636" rel="publisher">Google+</a>

Page 42: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Google+ Authorship & Publisher• Want to learn more?

• My talk from April 2013:http://seono.co.uk/2013/04/22/getting-your-face-in-google-my-cardiff-internet-talk/

or

• My upcoming talk at Port80 Localhost,Newport, August 2014 (date TBC)http://port80events.co.uk/localhost-events/ EndReturn

Page 43: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

hreflang (International SEO)• Use Google Webmaster Tools to geo-target domain…• If a ccTLD (e.g. .co.uk) then already designated for you (United

Kingdom)• But… If gTLD (e.g. .com), you can choose!

• Choose your target country, or:• ‘Unlisted’ = Global

• Working with a UK-based .com that only wants/needs UK traffic?Be sure to change it!• You can even geo-target sub-folders via GWT (e.g.

domain.com/uk/)

Page 44: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

hreflang (International SEO)• Also: consider hreflang

(full name: rel="alternate" hreflang="x")

• Useful for side-stepping duplicate content issues for multinational sites:• English, UK (GBP £)• English, Australian (AUD $)• Potentially 99% identical content

• Implement via:• <head>• XML sitemaps -

http://www.themediaflow.com/tool_hreflang.php

Page 45: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

hreflang (International SEO)• hreflang example:

• Top line: Global (English)• Middle line: UK (English)• Bottom line: Australian (English)

<link rel="alternate" hreflang="en" href="http://www.example.com/page.html" />

<link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" />

<link rel="alternate" hreflang="en-au" href="http://en-au.example.com/page.html" />

EndReturn

Page 46: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)• Rich snippets summarised in 5 words:

THEYMAKE

GOOGLELOOK

PRETTY

Page 47: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)• Examples:

Page 48: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)• Example of implementation via Schema.org – before:

<h1>Beachwalk Beachwear & Giftware</h1>A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.3102 Highway 98Mexico Beach, FLPhone: 850-648-4200

Page 49: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)• Example of implementation via Schema.org – after:

<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1> <span itemprop="description"> A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">3102 Highway 98</span> <span itemprop="addressLocality">Mexico Beach</span>, <span itemprop="addressRegion">FL</span> </div> Phone: <span itemprop="telephone">850-648-4200</span> </div>

Page 50: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)• Test it – http://

www.google.com/webmasters/tools/richsnippets

Page 51: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Rich Snippets (e.g. Schema.org)

EndReturn

Page 52: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Pagination (a.k.a. rel="next"/"prev")• Tags to improve Google’s understanding of paginated

content• Example for http://seono.co.uk/category/seo/page/2/

• Built into WordPress as standard (not sure about other platforms…)

EndReturn

Page 53: Choose Your Own Adventure: SEO For Web Developers | Unified Diff

Your adventure ends here.• Image credits – via Creative Commons licence:

• https://www.flickr.com/photos/notbrucelee/6305665821• https://www.flickr.com/photos/cdrummbks/3742991709• https://www.flickr.com/photos/cdrummbks/3743784604• https://www.flickr.com/photos/cdrummbks/3743784398• https://www.flickr.com/photos/ocreactive/4250593691• http://gavd.co.uk/2013/05/announcing-wineface-a-free-android-app/• https://www.flickr.com/photos/skipgoshannon/2412907219• https://www.flickr.com/photos/misterjt/2878889135• https://www.flickr.com/photos/_scypher/4776126765 • http://youchosewrong.tumblr.com/post/25438706634/from-be-an-interplanetary-spy-1-find-the• (All the rest were screenshots or credited in-slide.)

•SEOno.co.uk (blog)•morganonlinemarketing.co.uk (freelance)•@steviephil (Twitter)