Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SEO For Web Developers
CHOOSE YOUR OWN ADVENTURE
YOU’RE THE STAR OF THE STORY! CHOOSE FROM 12 EXCITING TOPICS!
BY STEVE MO...
Gav
Gav Me
Gav Me
Gav Meso seo
Gav Meso seo
much optimise
Gav Meso seo
much optimise
wow
Gave Meso seo
much optimise
wow
Gave Mehttp://seono.co.uk/
2013/09/02/best-
compliment-ever-
received-
developer/
http://moz.com/blog/the-web-
developers-seo-cheat-sheet-2013-
3 Main Areas of SEO
•1) Off-site (links)
•2) On-site – copy
•3) On-site – technical
3 Main Areas of SEO
•1) Off-site (links)
•2) On-site – copy
•3) On-site – technical
Facebook
Open Graph
& Twitter
Cards
Titles &
Metadata
Best Practice
Webmaster
Tools
Status Codes /
Redirects
Best Practice...
Titles & Metadata Best Practice
• Page Title:
• Now determined by pixel width, not character limit (but still about 60-ish...
Titles & Metadata Best Practice
• Meta description:
• 155-160 characters – Google truncates the rest (similar to title tag...
EndReturn
Titles & Metadata Best Practice
• Meta keywords:
• …
• Don’t bother (seriously…!)
• Google ignores it
• If Yahoo...
Webmaster Tools
• Google Webmaster Tools
• Submitting XML sitemaps
• Discovering 404 pages
• Seeing if you’re affected by
...
Webmaster Tools
• Bing Webmaster Tools
• …sucks! LOL (No, really.)
EndReturn
Status Codes / Redirects Best Practice
• Redirects
• Put simply:
301s = GOOD
302s = BAD!
• More info here: http://moz.com/...
Status Codes / Redirects Best Practice
• Soft 404s
• http://seono.co.uk/2014/04/23/4-examples-of-soft-404s-on-big-websites...
URLs Best Practice
URLs Best Practice
• Other factors:
• Dashes > Underscores
• all lowercase > Capitalisation Throughout
• Feel free to remo...
URLs Best Practice
• [Source: http://moz.com/learn/seo/url]
EndReturn
Canonicalisation
<link rel="canonical" href="http://example.com/blog" />
• [Source: http://moz.com/learn/seo/canonicalizat...
Canonicalisation
• Useful for:
• www. vs. non-www.
• http:// vs. https://
• Duplicate homepage (e.g. www.domain.com vs.
ww...
URL Parameters
• [Source: https://docs.google.com/presentation/d/1xWy5TOkB4rwoUHXFPgwVMgl2Op9PayZOWa5wdW7ZB-o]
• Search pa...
URL Parameters
• In Google Webmaster Tools:
• https://www.google.com/webmasters/tools/crawl-url-parameters
EndReturn
Robots Commands
• Remove a page from search engines (more effective than robots.txt):
<meta name="robots" content="noindex...
Facebook Open Graph & Twitter Cards
• Facebook Open Graph meta tags:
• [Source: http://blog.kissmetrics.com/open-graph-met...
Facebook Open Graph & Twitter Cards
• Facebook Open Graph meta tags:
• [Source: http://moz.com/blog/meta-data-templates-12...
Facebook Open Graph & Twitter Cards
• Twitter Card meta tags:
• [Source: http://blog.kissmetrics.com/open-graph-meta-tags/]
Facebook Open Graph & Twitter Cards
• Twitter Card meta tags:
• [Source: http://moz.com/blog/meta-data-templates-123]
<!--...
Google+ Authorship & Publisher
• Google Authorship, a.k.a. rel="author"
• Adding your face to Google’s search results:
• B...
Google+ Authorship & Publisher
• Google Authorship – three ways to implement (Step 1):
• 1) In the <head> (on any articles...
Google+ Authorship & Publisher
• Google Authorship – three ways to implement (Step 2):
• Add the site to your Google+ prof...
Google+ Authorship & Publisher
• Test it – http://www.google.com/webmasters/tools/richsnippets
Google+ Authorship & Publisher
• Google Publisher, a.k.a. rel="publisher"
• Equivalent for Google+ Brand pages for branded...
Google+ Authorship & Publisher
• Google Publisher – two ways to implement:
• 1) In the <head> (homepage only)
<link rel="p...
Google+ Authorship & Publisher
• Want to learn more?
• My talk from April 2013:
http://seono.co.uk/2013/04/22/getting-your...
hreflang (International SEO)
• Use Google Webmaster Tools to geo-target domain…
• If a ccTLD (e.g. .co.uk) then already de...
hreflang (International SEO)
• Also: consider hreflang
(full name: rel="alternate" hreflang="x")
• Useful for side-steppin...
hreflang (International SEO)
• hreflang example:
• Top line: Global (English)
• Middle line: UK (English)
• Bottom line: A...
Rich Snippets (e.g. Schema.org)
• Rich snippets summarised in 5 words:
THEY
MAKE
GOOGLE
LOOK
PRETTY
Rich Snippets (e.g. Schema.org)
• Examples:
Rich Snippets (e.g. Schema.org)
• Example of implementation via Schema.org – before:
<h1>Beachwalk Beachwear & Giftware</h...
Rich Snippets (e.g. Schema.org)
• Example of implementation via Schema.org – after:
<div itemscope itemtype="http://schema...
Rich Snippets (e.g. Schema.org)
• Test it – http://www.google.com/webmasters/tools/richsnippets
Rich Snippets (e.g. Schema.org)
EndReturn
Pagination (a.k.a. rel="next"/"prev")
• Tags to improve Google’s understanding of paginated content
• Example for http://s...
Your adventure ends here.
• Image credits – via Creative Commons licence:
• https://www.flickr.com/photos/notbrucelee/6305...
Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Choose Your Own Adventure: SEO For Web Developers | Unified Diff
Upcoming SlideShare
Loading in …5
×

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

1,671 views

Published on

On Thursday 19th June 2014 I gave a talk at Unified Diff (a monthly web/software development meet-up) in FoundersHub in Cardiff.

The structure of the talk allowed the audience to choose the topics of their choice. We only had time for 4 out of a possible 12, which were (in order):

- URL Parameters
- Canonicalisation
- Titles & Metadata Best Practice
- Status Codes / Redirects Best Practice

However this version of the deck contains the slides for all 12 topics, so if you were there on the night and were hoping that I'd cover a particular topic, well now you can see the slides at least!

Published in: Marketing, Technology, Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. SEO For Web Developers CHOOSE YOUR OWN ADVENTURE YOU’RE THE STAR OF THE STORY! CHOOSE FROM 12 EXCITING TOPICS! BY STEVE MORGAN
  2. 2. Gav
  3. 3. Gav Me
  4. 4. Gav Me
  5. 5. Gav Meso seo
  6. 6. Gav Meso seo much optimise
  7. 7. Gav Meso seo much optimise wow
  8. 8. Gave Meso seo much optimise wow
  9. 9. Gave Mehttp://seono.co.uk/ 2013/09/02/best- compliment-ever- received- developer/
  10. 10. http://moz.com/blog/the-web- developers-seo-cheat-sheet-2013-
  11. 11. 3 Main Areas of SEO •1) Off-site (links) •2) On-site – copy •3) On-site – technical
  12. 12. 3 Main Areas of SEO •1) Off-site (links) •2) On-site – copy •3) On-site – technical
  13. 13. Facebook Open Graph & Twitter Cards Titles & Metadata Best Practice Webmaster Tools Status Codes / Redirects Best Practice URLs Best Practice Canonica l-isation URL Parameter s Robots Commands Google+ Authorship & Publisher hreflang (Internationa l SEO) Rich Snippets, e.g. Schema.org Pagination, aka rel="next" Facebook Open Graph & Twitter Cards
  14. 14. 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]
  15. 15. 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
  16. 16. 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…
  17. 17. 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…!
  18. 18. Webmaster Tools • Bing Webmaster Tools • …sucks! LOL (No, really.) EndReturn
  19. 19. Status Codes / Redirects Best Practice • Redirects • Put simply: 301s = GOOD 302s = BAD! • More info here: http://moz.com/learn/seo/redirection
  20. 20. 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 page isn’t a 404… • …So Google indexes it. • [Server header checker tool link] EndReturn
  21. 21. URLs Best Practice
  22. 22. 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
  23. 23. URLs Best Practice • [Source: http://moz.com/learn/seo/url] EndReturn
  24. 24. Canonicalisation <link rel="canonical" href="http://example.com/blog" /> • [Source: http://moz.com/learn/seo/canonicalization]
  25. 25. 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
  26. 26. 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)
  27. 27. URL Parameters • In Google Webmaster Tools: • https://www.google.com/webmasters/tools/crawl-url-parameters EndReturn
  28. 28. 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
  29. 29. Facebook Open Graph & Twitter Cards • Facebook Open Graph meta tags: • [Source: http://blog.kissmetrics.com/open-graph-meta-tags/]
  30. 30. 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" />
  31. 31. Facebook Open Graph & Twitter Cards • Twitter Card meta tags: • [Source: http://blog.kissmetrics.com/open-graph-meta-tags/]
  32. 32. 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
  33. 33. 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(?)
  34. 34. 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…
  35. 35. 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 society Non-SEO guest post SEO social media site Old employer’s blog SEO guest posts
  36. 36. Google+ Authorship & Publisher • Test it – http://www.google.com/webmasters/tools/richsnippets
  37. 37. Google+ Authorship & Publisher • Google Publisher, a.k.a. rel="publisher" • Equivalent for Google+ Brand pages for branded searches…
  38. 38. 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>
  39. 39. 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
  40. 40. 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/)
  41. 41. 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
  42. 42. 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
  43. 43. Rich Snippets (e.g. Schema.org) • Rich snippets summarised in 5 words: THEY MAKE GOOGLE LOOK PRETTY
  44. 44. Rich Snippets (e.g. Schema.org) • Examples:
  45. 45. 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 98 Mexico Beach, FL Phone: 850-648-4200
  46. 46. 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>
  47. 47. Rich Snippets (e.g. Schema.org) • Test it – http://www.google.com/webmasters/tools/richsnippets
  48. 48. Rich Snippets (e.g. Schema.org) EndReturn
  49. 49. 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
  50. 50. 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)

×