Presented by Chris Surridge - http://www.whitefishmarketing.co.uk At Code Harbour event on 6th Feb 2014, held at the Workshop in Folkestone, Kent. Whitefish Marketing are a Digital Marketing agency in Kent, focused on helping clients secure more customers at the 3 aspects of the consumer journey: (1) Acquisition, (2) Conversion, (3) Retention. Code Harbour (http://www.meetup.com/codeharbour/) is a networking event created for web developers and alike to discuss latest trends, topics and ideas. "BRIDGING THE GAP BETWEEN DIGITAL MARKETERS AND WEB DEVELOPERS" The presentation was originally designed to identify certain key issues that repeatedly crop up, to describe the concerns which Digital Marketers may face when trying to optimise their site (usually Technical SEOs), and how these issues can be addressed by the developers during the project management stages of the build, and just before web launch. The topics originally for discussion were 1- trailing slash (notice the lack of trailing slash on "WhitefishMarketing - naughty naughty!") 2 - capitalisation within URLs 3 - canonical URLs 4 - open graph additions 5 - Rich snippets 6 - daily sitemaps 7 - best Robot.txts 8 - relative URLs in code 9 - java/ajax/flash issues 10 - cached CSS files 11 - tags affecting load speed 12 - Google tag manager 13- URL structure and hierarchy 14 - Hard Coding of Header tags 15 - usage/removal of frames (In truth, due to some time restrictions, we categorised some of the topics together, and changed a few others. See the "Agenda" slide in the presentation for an updated version of what was covered) I will endeavour to find the time to write out a better explanation of each slide, and a rough transcript of the examples I was using during the presentation. However for now, I hope you find my presentation interesting, somewhat enlightening, and if you can take away just 1 piece of useful information... then I have done my job. For more information of the topics discussed, contact Whitefish Marketing: http://www.whitefishmarketing.co.uk 0845 862 2698 hello@whitefishmarketing.co.uk

1. codeHarbour at the Workshop
Welcome
“Bridging the gap between marketer and developer”
Thursday 6th Feb 2014

2. Informative… but not compulsory
Keep it light!

3. Introductions
Multi Channel
Digital Marketing
Campaigns
10yrs, last 6 digital
Whitefish
Marketing

4. Agenda
• Trailing Slash, Capitalisation, Canonical URLs
• Facebook Opengraph, Rich Snippets
• Sitemaps
• Usability vs SEO functionality
• H1s in HTML5
• Discussion

5. Trailing Slash/, CAPITALISATION, canonical rel=

6. Trailing Slash, Capitalisation, Canonical URLs
www.example.com
www.example.com/
Trailing slash is a directory, whilst no trailing slash is a file.
Usually: 1x is 200 status, 1x is 301 redirect
Which is better?

7. Trailing Slash, Capitalisation, Canonical URLs
WITH WITHOUT
200 status code
Quicker load
Should be default
301 status code (sometimes 404)
Fraction longer load
Potential for redirect loop
Better to canonicalize

8. Trailing Slash, Capitalisation, Canonical URLs
Does it matter which one I use?
Some considerations:
1, find the one which is 200 status code and use that as your default.
301 the other or use canonical tags to address the issue.
2, duplicate issues if BOTH return as 200 status code.
(other implications: split link credibility, popularity affected etc.)
3, ensure you update your sitemap files accordingly as well.
4, seo link building will also be impacted. Links without slash going to sites with, don’t
match in Google’s view. Ever more important to use the complete URL of the website
when building links.

9. Trailing Slash, Capitalisation, Canonical URLs
Common canonicalization errors with default settings in 2 popular web servers:
Duplicate Indexing Issues
Apache Web Server:
• http://www.example.com/
• http://www.example.com/index.html
• http:/example.com/
• http://example.com/index.html
Microsoft Internet Information Services (IIS):
• http://www.example.com/
• http://www.example.com/default.asp
(or .aspx depending on the version)
• http://example.com/
• http://example.com/default.asp (or .aspx)
or any combination with different capitalization

10. Trailing Slash, Capitalisation, Canonical URLs
Why are these problems important?
Separate URLs spread out the value of inbound links to the homepage
i.e. separate credit, not a combined effort
Separate URLs mean duplicate content issue – multiple indexing of same content
“Having different versions of the same page without the proper redirects or
canonicalization, mean links can be split between the different pages, and also
popularity of that page (or rather, what SHOULD be a single page) is also reduced.”

11. Trailing Slash, Capitalisation, Canonical URLs
Solution for all:
-Find the correct URL (status code 200) with trailing slash
-301 redirect the rest
-Or better yet; canonical rel tag
Notes: 3xx redirects. Why canonical rel tags are better
-Link juice 90-99% with 301. 0% with 302
- Linking to non-slash URL (even after redirects added) means 1-10% link juice lost
- Potential for Redirect loop
-Reduction on HTaccess file by using canonical rel tags

12. Facebook Opengraph

13. Facebook Opengraph
174% increase in Facebook Traffic

14. Before we used Opengraph

15. After…

16. Facebook Opengraph
Some simple tips
• Agencies using Hootesuite and RSS feed uploaders
• Bespoke OG tags for each page – don’t implement boilerplate sitewide
• Replicate SEO meta data. Then Advert hook replicates the message on Landing Page
• Wordpress already has a plugin – otherwise see Facebook developer apps
• Similarly: Twitter cards for twitter.
Enhanced Data gathering similar to Schema

17. Rich Snippets

18. Rich Snippets

19. Rich Snippets

20. Rich Snippets

21. Rich Snippets

22. Sitemaps

23. Sitemaps
Why have them?
• Your site has dynamic content
• Your site has pages that aren't easily discovered by Googlebot
during the crawl process e.g. adopt AJAX or image based.
• Your site is new and has few links to it. (Googlebot not yet
discovered it.)
• Your site has a large archive of content pages that are not well
linked to each other, or are not linked at all.

24. Sitemaps
Different types?
• Mobile
• News
• Geo
• Image Sitemaps
• Video Sitemaps
• Xml and html

25. Sitemaps
FAQs
Q - Frequency of updates?
A – depending on size; daily, through to 1 per quarter
Q - Where to submit and add?
A – Webmaster tools (google and bing), robots.txt
Q - Common errors with sitemaps?
A – Transient pages need not be included. Potential to increase 404s afterwards.

26. Usability Vs SEO

27. Usability vs SEO functionality
Common encounters
• Ajax, javascript, iframes, flash – needs SEO text surrounding it
• Duplicate links and no follow – e,g main nav, then footer nav
• Sitewide footer links - (brings it close to max 100)
• Duplicate content from manufacturers site – cheaper, quicker
• Excessive keyword in URL structure (or vanity terms)
• Multiple tracking tags (retargeting, analytics, A/B testing, another analytics etc.)
• Images – nice, but ensure they are right file size
• RSS live news feed – one link!

28. H1s within HTML5

29. HTML 5 and H1 usage
Pre-HTML5
- Only 1x H1 tag per page. Supposed to be reflect the page content
- Single H1 tag may not be relevant to ALL of the page – generalisation means page
relevancy is diluted
- Separate articles incorrectly seen as subsections of a single piece of content
- Lack of multiple H1 mean reduced ability to further promote brand
- Lack of ability to properly separate out sections of same content

30. “Lack of multiple H1 mean reduced ability to further promote brand”

31. “Lack of multiple H1 mean reduced ability to further promote brand”

32. Less relevant H1 tag
to denote the whole
page
What should have
been main titles, now
pushed to H2

33. HTML 5 and H1 usage
Post-HTML5
- Potential for multiple H1 tags per page
- Used of sectioning allows for better breakup and markup of page’s structure
- Can continue pushing the brand with over-riding site-wide H1 tag.

34. Post-HTML5 – 4 content sections
<article> tags should be used where a piece of content could be taken out of a page
completely and still make sense by itself with no surrounding content.
<section> tags, on the other hand, should be used for content that is grouped together
according to a theme, but makes sense only in the context of the content surrounding it
<nav> tags are designed to indicate major navigation blocks on a webpage, such as a
menu bar or pagination. They shouldn't be applied to regular links, only to significant
sections that are wholly dedicated to navigation.
<aside> tags could effectively be described as the "everything else" element for content
that is neither article, section nor navigation. W3C prescribes this tag for use when
something is tangentially related to the content around it, but is separate from the main
content of the page, such as sidebars, blogrolls and so on.

35. Now multiple H1s
BUT… in proper
<article> sections

36. HTML 5 and H1 usage
New Usage Rules
• Use one set of <h1> tags per sectioning root or content section.
• There should always be a <h1> level heading between the opening <body> tag
and the first content section, to label the overall document.
• When a <h1> level heading is to be used to label a content section, it should be
the first heading that appears in the section, because the first heading is always
interpreted as the section's label. (i.e. not H2, H1, H3 – maintain correct order)
• If a <h1> level heading is used to label a content section, any other headings used
in that section should be H2 or lower in order to create an accurate document
outline.

37. HTML 5 and H1 usage
Final thoughts on this
- Correctly use the sections in HTML5
- Still don’t overkill
- Still use schema tags to support
For example, on your article tag you might include 'itemscope
itemtype="http://schema.org/Art...; and then on the H1 title of that article you
would include 'itemprop="headline"'. This would be a better identifier.

38. References:
Trailing Slash:
http://googlewebmastercentral.blogspot.co.uk/2010/04/to-slash-or-not-to-slash.html
http://www.awebguy.com/2011/02/seo-trailing-slash/
Facebook Opengraph:
http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-
graph-and-cards/
https://schema.org/
http://www.wordtracker.com/academy/rich-snippets
http://searchengineland.com/can-retailers-benefit-from-the-knowledge-graph-
schema-you-bet-122676
HTML5
http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-
html5-era--webdesign-16824