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

Upload: steve-morgan

Post on 16-Apr-2017

1.445 views

Category:

Marketing


4 download

TRANSCRIPT

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)