Marketing Presentation

Practical SEO for Web Developers

An Introduction to SEO | Part 1

Noel Flowers October 15th, 2014

Purpose of Presentation

Provide a basic understanding of Search Engine Optimization

Look at SEO from a practical web development perspective

Give real examples of how to create SEO-friendly code

Explain the purpose of SEO & dispel the myths surrounding it

Content

What is Search Engine Optimization?

The underlying principles and objectives

How it affects web development Some easy improvements to

apply Helpful resources and handy tools

to use

What is Search Engine Optimization?

Common Definitions

Search Engine Optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic") search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users. (source: Wikipedia.com)

SEO is short for Search Engine Optimization, which is a methodology of strategies, techniques & tactics used to increase the amount of visitors to a website by obtaining a high placement rank in the search results page (SERP) of search engines like Google, Bing, or Yahoo. SEO helps ensure that a site is accessible to search engines & improves the chances the site will be found. (source: Webopedia.com)

SEO Myths & Misconceptions

There are many misconceptions surrounding SEO, and some marketers who like to perpetuate the myth that it is a complex and mysterious craft that requires a marketing wizard adept in the black, grey or white-hat magical arts to conjure up success.

Here are some of the more common SEO myths and why they are busted:

It’s all about the rankings baby!Search rank is an outcome of website optimization, it is not the goal

Repeating keywords in content and code, increases visits/rank for that term

Stuffing content with your keywords, not useful information, hurts rather than helps

The more links to your website, the betterThink quality not quantity. Links should be useful and relevant to the user

The Underlying Principles of SEO

53% of users click on the

FIRST organic Google search

result

12% click 2nd, 8.5% on the 3rd, and decreases incrementally until only 3%

click on 10th result.

This is the difference between receiving 1 million clicks (1st spot) or only 73,500

(10th)

Did you know?

What is the Purpose of SEO?

To truly understand search engine optimization, we need to stop over complicating it and look at the reasons for its existence, the underlying purpose it serves, and the objectives that serve as its foundation.

Search engines like Google have a very simple aim; to connect users with the most relevant content results for their search query

To achieve this, they have developed complicated algorithms that assess numerous elements to determine the site’s usability and relevance to the query

The goal isn't to manipulate the search engine algorithms so you can rank highly in search results, but rather to communicate through various means the purpose of your website so it can be matched to relevant searches. While providing visitors with an efficient and seamless user experience

There are a million and one different opinions about how to approach SEO, but if you can remember these three very basic premises, the rest should come easy:

SEO Principle #1 – Don’t try to outsmart Google

SEO Principle #2 – Create websites for people

SEO Principle #3 – Build in a way robots understand

The Basic Principles

How does this Relate to Development?

Developers Areas of Influence

SEO is not just the realm of content writers and digital marketers. It should be at the forefront of everyone’s mind, most especially web developers. Skipping the basics of SEO can leave a site's foundation in chaos, severely crippling its possibility of success.

Here are a few key areas which are fall under the responsibility of the programmer:

Accessibility – can search engines find the site, and are spiders able to crawl it

Performance – user experience is greatly affected by page speed and site integrity

URL Structure – should be clear and logical, and understandable to humans

Code – clean and semantically correct code that makes appropriate use of tags

Compatibility – make sure site is compatible across desktop and mobile browsers

Some Practical Examples Here are some common examples of how simple adjustments to specific areas can provide significant improvements to a site’s SEO. If you keep in mind the 3 basic principles of SEO, many of these are just good old common sense:

Accessibility

Build websites search spiders can crawl – search engines find pages by following HTML links. If your pages aren't linked properly, your pages will never be indexed so will not appear in search results. Here are some examples of barriers that can cause problems for spiders

1. Javascript Links – if you use Javascript links, be sure to have text links as well

2. Links in Flash – many engines can't follow Flash links, so also include text links

3. Orphaned pages – make sure every page is linked to from at least 1 other page

4. Dynamic URLs – can be problematic, use ‘mod rewrite’ to turn into static url

5. Site is down – engines can't index a site if it's down, so use a reliable webhost

Some Practical Examples (contd.) – Accessibility

Can the spider read your page? – even if robots can find a page they have to be able to see the words in order to index them. Spiders can't read text in graphics (use alt tags), they're still not very good at reading Flash pages either, so make sure any Flash page you have has a "Skip this intro...“ and links to your text-rich content

Moving pages or whole site – to preserve domain / page rankings when renaming or replacing pages, or moving to a new domain use the appropriate redirect command in the Apache server software:

1. 301 – Moved Permanently2. 302 – Found (HTTP 1.1) / Moved Temporarily (HTTP 1.0)3. 307 – Moved Temporarily (HTTP 1.1 Only)4. Meta Refresh – Page level rather than server level redirect (not

recommended)

Some Practical Examples (contd.) – Accessibility

Robot control syntax – use the Robots.txt file to help a search engine determine what should and should not be indexed, here are some pointers on how to use

Some Practical Examples (contd.) – Performance

Performance

Speed up your website – the longer you make users wait for a page to load, the more chance you have of losing them. Here are a few quick tips to instantly speed up your website and hold on to visitors ever-shortening attention span (4-6 secs.):

1. Optimize Images – an obvious one which is too often overlooked

2. Activate Gzip compression – a few lines of code can save up to 50% load time

3. Minify your Files – can be done with tools like Codekit, Prepos and Grunt

4. Concatenate all CSS & JavaScript – eliminate wasteful HTTP requests

5. Use Sprites – turn images into a simple sprite sheet with tools like Stitches

6. Use a CDN – load external CSS and JavaScript from CDNs where possible

7. Use Caching – if a file has been downloaded, why waste time doing it again?

Some Practical Examples (contd.) – URL Structure

URL Structure

Logical architecture and navigation – the optimal structure for a site should look similar to a pyramid and have as few links as possible between the home and any given page, with readily accessible navigation. Some important points to note:

1. Subdomains vs. Subfolders – subdomains are seen as a separate site by engines

2. Use of Categories – instead of using …/114/cat223/, go with …/brand/reebok

3. Maintain XML Sitemap – keep it up to date and submit to engines for indexing

Human readable URL – a user should be able to know what a page is about by reading the URL, so use meaningful and descriptive names and these tips:

1. Proper Syntax – use hyphens rather than underscores as spaces between words

2. Use Descriptive Keywords – keep it brief, no more than 3-5 words in length

3. Rewrite Default URL’s – mostly for dealing with CMS or eCommerce platforms

Some Practical Examples (contd.) – URL Structure

Avoid Duplicate URLs – Google will treat any differentiation in a URL as a unique page, even when that URL points to a page with identical content. This can lead to penalties for duplicate content and decrease rankings. Some solutions include:

1. 301 Redirect – redirect other pages to preferred URL2. Use Canonical URLs – set a preferred version of duplicate

pages 3. Ignore Parameters – use WMT to ignore dupes created by

tracking parameters

Some Practical Examples (contd.) – Output Code

Output Code

Important HTML elements – these play a key role in communicating with users & search engines alike the purpose of your site pages. Key ones are shown below:

Some Practical Examples (contd.) – Output Code

Hyperlinks – should accurately define what someone will get when they click on it. For example, anchor text like “Download Our SEO White Paper” is much better than “Click Here”. This applies for both the user experience and for search engines:

Some Practical Examples (contd.) – Output Code

Heading tags – like <h1>,<h2>, etc. tell users (human and robot) more about the contents of your page and what they can expect to get from it. Do not use paragraph tags and style them as a heading using css, use heading tags instead

Validate your code – search engines like to see nice mark-up, as itt allows them to more easily read what is on a site and its pages. Thus, make appropriate use of tags and eliminate any and all code bloat. Some suggestions along these lines include:

1. Use only one h1 tag (unless using HTML5) & all other header tags appropriately

2. Ensure your code is semantically correct – using tools like W3C Validator

3. Eliminate any bad or broken links

Schema.org and microformats – a markup language agreed upon by all three major engines (Google, Yahoo, Bing), which represents a hugely important development in the way we find people, places and things called entity-based search. See the full list of usable schemas to get an idea of the possibilities it creates

Some Practical Examples (contd.) – Compatibility

Compatibility

Mobile & desktop browser compatibility – Google for one has declared its support of responsive design whenever possible, and device-specific HTML where responsive is not an option. Ideally, content should also be tailored to mobile too.

Some Black Hat Practices to Avoid

Naughty, Naughty!The first basic principle we discussed was “Don’t try to cheat Google” and there is a good reason for this. Google makes it clear that it disapproves of certain SEO tactics, (see their list) and have been known to crack down heavily on any activity they deem to be contrary to the spirit of SEO, going so far as to remove sites it felt weren't playing fair. You would be wise to avoid the wrath of the Google gods, so best to avoid:

Invisible text – Don't put white text on a white background. In fact, don't put even very light yellow on a white background. The engines aren't stupid; just because the colors aren't exactly the same doesn't mean they can't figure out there's no contrast. Yes, there are clever ways to try to fool Google about what the background color actually is, but Google is probably aware of most of them anyway

Cloaking – Google knows what's on your site through periodical automated scans by Googlebot to the pages in its index, to grab all the page content for analysis. Cloaking means showing one page to Googlebot and a completely different page to real human visitors. Google despises this aplenty

Naughty, Naughty! (contd.)

Keyword Stuffing – engines want your pages to be natural. Finding every place to cram your keywords onto your pages (or worse, including a "paragraph" of nothing but keywords, especially if they're repeated ad nauseum) is a big no-no. Do you consider pages with lists of keywords to be high quality? Neither does Google.

Doorway pages – this is a page built specifically for the purpose of ranking well in the search engines and without any real content of its own, which then links to the "real" destination page, or automatically redirects there. Doorway pages are a popular choice of some SEO firms, although Google has cracked down on this and many webmasters saw their pages disappear from the index.

Spam – with regards to SEO, spam refers to worthless pages with no content, created specifically for the purpose of ranking well in the engines. You think they have what you're looking for, but when you get there it's just a bunch of ads or listings of other sites. The webmaster is either getting paid by the advertisers, or the page is a doorway page, with the webmaster hoping that you'll click over to the page they want you to go to

The Consequences

There are two possible punishments for violators of any of Google’s policies and it's important to distinguish between them since they're entirely different:

Banned – your site is removed from the index completely. This is pretty rare; most people who think they've been banned are actually still in the index. It's easy to tell whether you've been banned by Google. Assuming your site was in the index to begin with, search Google for site:yourdomain.com. If you get any results, your site hasn't been banned

Penalized – means having your rank reduced. Unfortunately there is no proven way to test for this. A lot of the time when someone thinks they've been penalized, they're actually wrong. Rankings change, sites drop, it's all part of the way the search engines work

Some Handy Resources and Tools

SEO Tools & Resources for Programmers

• Developers SEO Cheat Sheet – moz.com/blog/the-web-developers-seo-cheat-sheet-2013-edition

• WP SEO Plugins – www.presslabs.com/plugins/top-3-seo-wordpress-plugins-from-a-developers-perspective/

• Google's Starter Guide for Search Engine Optimization (PDF download) – static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

• Google One-page SEO Guide - storage.googleapis.com/support-kms-prod/SNP_3027140_en_v0

• Google slideshow on 'Moving Up in Natural Search' – googlegrants.blogspot.com/2009/06/moving-up-in-natural-search.html

• Quick checklist – www.driftrock.com/blog/best-practice-seo-tips-all-web-developers-should-know

• Technical SEO tips for Developers – www.slideshare.net/singsyspteltd/technical-seo-tips-for-web-developers

• 7 Tips to Optimize – www.developerdrive.com/2014/10/7-simple-ways-to-optimize-your-website/

Thank You!

Please feel free to ask any questions

n.flowers@arcanys.com