This presentation by Noel Flowers introduces the fundamentals of search engine optimization (SEO) specifically for web developers, emphasizing practical applications and common misconceptions. It outlines the basic principles of SEO, its importance in web development, and offers actionable insights on accessibility, performance, URL structure, and code optimization to enhance website visibility. The document also highlights best practices, potential penalties for unethical SEO tactics, and provides resources for further learning.

1. Marketing Presentation
Practical SEO for Web Developers
An Introduction to SEO | Part 1
Noel Flowers
October 15th, 2014

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

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

4. What is Search Engine Optimization?

5. 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)

6. 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 better
Think quality not quantity. Links should be useful and relevant to the user

7. The Underlying Principles of SEO

8. of users click
on the 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)

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

10. The Basic Principles
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

11. How does this Relate to Development?

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

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

14. 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 Permanently
2. 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)

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

16. 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?

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

18. 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 URL
2. Use Canonical URLs – set a preferred version of duplicate pages
3. Ignore Parameters – use WMT to ignore dupes created by tracking parameters

19. 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:

20. 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:

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

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

23. Some Black Hat Practices to Avoid

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

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

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

27. Some Handy Resources and Tools

28. 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/

29. Thank You!
Please feel free to ask any questions
n.flowers@arcanys.com