codeHarbour at the Workshop

Welcome

“Bridging the gap between marketer and developer”

Thursday 6th Feb 2014

Informative… but not compulsory

Keep it light!

IntroductionsMulti Channel Digital Marketing Campaigns

10yrs, last 6 digital

Whitefish Marketing

Agenda

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

Trailing Slash/, CAPITALISATION, canonical rel=

Trailing Slash, Capitalisation, Canonical URLs

www.example.comwww.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?

Trailing Slash, Capitalisation, Canonical URLsWITH WITHOUT

200 status codeQuicker loadShould be default

301 status code (sometimes 404)Fraction longer loadPotential for redirect loopBetter to canonicalize

Trailing Slash, Capitalisation, Canonical URLsDoes 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.

Trailing Slash, Capitalisation, Canonical URLsCommon 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

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.”

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

Facebook Opengraph

Facebook Opengraph

174% increase in Facebook Traffic

Before we used Opengraph

After…

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

Rich Snippets

Rich Snippets

Rich Snippets

Rich Snippets

Rich Snippets

Sitemaps

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.

Sitemaps

Different types?

•Mobile•News•Geo•Image Sitemaps•Video Sitemaps•Xml and html

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.

Usability Vs SEO

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!

H1s within HTML5

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

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

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

Less relevant H1 tag to denote the whole page

What should have been main titles, now pushed to H2

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.

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.

Now multiple H1s

BUT… in proper <article> sections

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.

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.

References:

Trailing Slash:http://googlewebmastercentral.blogspot.co.uk/2010/04/to-slash-or-not-to-slash.htmlhttp://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-snippetshttp://searchengineland.com/can-retailers-benefit-from-the-knowledge-graph-schema-you-bet-122676

HTML5http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824