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