Bridging the gap between Digital Marketers and Web Developers


Published on

Presented by Chris Surridge -
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 ( is a networking event created for web developers and alike to discuss latest trends, topics and ideas.


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:
0845 862 2698

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 2 - if both trailing slash and non slash return 200 codes, then there is potential for duplicate content issues. Google will see them as 2 sepearateurls, and its unlikely you will have different content on one from the other.  Over time and within larger websites this has a diluting effect on performance.
  • Bridging the gap between Digital Marketers and Web Developers

    1. 1. codeHarbour at the Workshop Thursday 6th Feb 2014 Welcome “Bridging the gap between marketer and developer”
    2. 2. Informative… but not compulsory Keep it light!
    3. 3. Introductions Multi Channel Digital Marketing Campaigns 10yrs, last 6 digital Whitefish Marketing
    4. 4. Agenda • • • • • • Trailing Slash, Capitalisation, Canonical URLs Facebook Opengraph, Rich Snippets Sitemaps Usability vs SEO functionality H1s in HTML5 Discussion
    5. 5. Trailing Slash/, CAPITALISATION, canonical rel=
    6. 6. Trailing Slash, Capitalisation, Canonical URLs 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. 7. Trailing Slash, Capitalisation, Canonical URLs WITH 200 status code Quicker load Should be default WITHOUT 301 status code (sometimes 404) Fraction longer load Potential for redirect loop Better to canonicalize
    8. 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. 9. Trailing Slash, Capitalisation, Canonical URLs Common canonicalization errors with default settings in 2 popular web servers: Apache Web Server: • • • http:/ • Microsoft Internet Information Services (IIS): • • (or .aspx depending on the version) • • (or .aspx) or any combination with different capitalization Duplicate Indexing Issues
    10. 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. 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. 12. Facebook Opengraph
    13. 13. Facebook Opengraph 174% increase in Facebook Traffic
    14. 14. Before we used Opengraph
    15. 15. After…
    16. 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. 17. Rich Snippets
    18. 18. Rich Snippets
    19. 19. Rich Snippets
    20. 20. Rich Snippets
    21. 21. Rich Snippets
    22. 22. Sitemaps
    23. 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. 24. Sitemaps Different types? • • • • • • Mobile News Geo Image Sitemaps Video Sitemaps Xml and html
    25. 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. 26. Usability Vs SEO
    27. 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. 28. H1s within HTML5
    29. 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. 30. “Lack of multiple H1 mean reduced ability to further promote brand”
    31. 31. “Lack of multiple H1 mean reduced ability to further promote brand”
    32. 32. Less relevant H1 tag to denote the whole page What should have been main titles, now pushed to H2
    33. 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. 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. 35. Now multiple H1s BUT… in proper <article> sections
    36. 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. 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=";- and then on the H1 title of that article you would include 'itemprop="headline-"'. This would be a better identifier.
    38. 38. References: Trailing Slash: Facebook Opengraph: HTML5