20 SEO Tips That Every Web Developer Should Follow

One aspect of web development that is many times overlooked is search engine optimization. In this list, I’ll show you some basic SEO techniques that will help you make friends with Google, and increase your page rank!

1: Write Semantic and Valid Markup

It’s important to write meaningful and semantic markup so search engines can easily extract and classify what’s relevant on your page. That includes two key practices:

1. Use proper headings and listings.
2. Always validate your markup

I can’t stress enough those two points. There have always been a debate about if you should use the

tag for the logo/title of your page or the post title (if you are building a blog), but the important thing here is that the information in your page must be presented hierarchically, using all six heading tags
if possible.

2: Optimize your Title and Meta Tags the Correct Way

Back in the day, meta tags were the first thing you had to take care of when dealing with SEO. Because Google and other search engines don’t rely on them anymore, you only have to focus on the description meta tag, because that’s the one which will be displayed on the results page under the title.

Your title tag is very important to search engines, and like your meta tags, should be different for every page of your site. It must be relevant and descriptive to the content of the page, and shouldn’t be too long -but enough to describe what your page is about. For example, instead of:

<title>John Smith's Shop</title>

Something better would be:

<title>John Smith's Fishing Supplies - Find the best fishing supplies in California</title>

If you are using WordPress, there are many useful plugins for managing title and meta tags in your blog. I recommend the All in One SEO pack, it’s easy to use and works out-of-the-box.

3: Always Use alt and title Attributes

The title attribute, besides making a site more accessible, serves the purpose of telling search engines about the topic of the site you are linking to, so try to avoid things like:

To see all of our fishing boats, <a href="#">Click here</a>

Instead, use…

<a href="#" title="View all of our fishing boats">View all of our fishing boats</a>

The alt attribute is basically the same, but for images, it’s the way of describing our image to the search engine.

4: Maintain your CSS and JavaScript files Externally

Search engines usually ignore CSS and JavaScript files, but even if they don’t (Google’s algorithm changes), placing your CSS/JavaScript in external files will help the crawler find your content faster.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="functions.js" type="text/JavaScript" charset="utf-8"></script>

5: Use Google Webmasters Tools

You can make Google do a lot of work simply by adding your site to Google Webmasters Tools, that is linked to your Gmail/Google account. It shows you how Google crawls and indexes your site to help diagnose problems. You can see all internal and external links pointing to your site and which search queries are driving the most traffic. Also, it lets you configure things, such as a preferred domain name for your site, with or without www, so it knows is the same site and page rank doesn’t get divided.

6: Keep your HTML Simple

Build your site using only the necessary markup and make your layout as simple as possible (no tables, of course!). It will help the search engines to index it easily. And that brings me to my next point:

7: Avoid Frames

Frames make your site load slower and makes it difficult for the robots to crawl it.

If you must use frames, always offer noframes content and be sure that each frame has a descriptive title.

8: Use JavaScript Only for Progressive Enhancement

You must ensure that your JavaScript only adds new layers of enhanced functionality and your site works with JavaScript disabled, specially when dealing with navigational elements, such as menus.

The search engines should be able to read your navigation as a nested list to index it properly:

<ul>
 <li><a href="home.html">Home</a></li>
 <li><a href="shop.html">Shop</a>
  <ul>
   <li><a href="boats.html">Boats</a></li>
   <li><a href="supplies.html">Supplies</a></li>
  </ul>
 </li>
 <li><a href="about_us.html">About Us</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>

And then you can format it as a fancy drop down menu using CSS and JavaScript.

9: Be Careful When Using Flash

Although now search engines can index flash content, they still don’t do it very well. Keep your flash to a minimum, and avoid using it for text. Don’t use it for creating menus either, you can probably make the same effects, like I said before, just with CSS and JavaScript while keeping your html structure nice and clean.

Personally I would limit the use of flash in the web to embedded videos/sound and some useful animation (like an animated infographic), but nothing more.

10: Create a sitemap.xml file for Google

To be sure that your pages are indexed and cached quickly in Google, you can create a sitemap.xml file. It’s a XML file that contains a list with all the pages on your site. It follows the Sitemap protocol like that:

version="1.0" encoding="UTF-8"?>
="http://www.sitemaps.org/schemas/sitemap/0.9">
   
      http://www.example.com/</loc>
      2005-01-0</lastmod>
      monthly</changefreq>
      0.8</priority>
   </url>
</urlset>

You can create it manually following Google’s help for creating sitemaps or, if you use WordPress, you can install
XML Sitemap Generator for WordPress plugin that builds it automatically and notifies Google of the changes.

11: Make a Site Map

Besides creating a sitemap.xml, you should also make a detailed html sitemap page that links to every page on your site. It helps your users and search engines find the content easily. The less clicks it takes to get to a page, the better.

A good tool to create beautiful and easy to maintain site maps is slickmap, a simple stylesheet that shows a nice site map from an unordered list navigation.

12: Add a robots.txt File to Your Root Directory

By default, search engines crawl and index everything in a website. You can block some files or folders that aren’t relevant or don’t want to get indexed by placing a robots.txt in your root folder. An example of a robots.txt could be:

User-agent: *
Disallow: /images/
Disallow: /js/

The command “User-agent: *” allows the crawler to search through your site freely, and “Disallow” commands prevent it to analyze those folders.

13: Check for Broken Links and Images

If your page has links pointing to content that doesn’t exist, it will probably never be found. It’s also a fact that search engines penalize sites with many broken links, so don’t forget to use the W3C link validator toolto find them.

14: Avoid Duplicate Content

Duplicate content can be dangerous to your search engine rankings. But, what is duplicate content?

If you have a WordPress blog, you probably have a category and archives pages in your sidebar. These pages are just a collection of your posts, so you could have identical content in some of them: for example, when you have just a post in a category or in a given day, the content in that archive/category page will be the same as the post itself.

You can solve these and others duplicate content problems by using noindex, follow in your robots meta tag, using a 301 redirect or with a robots.txt file.

15: Create an Informative Error Page

If a user mistakenly types a wrong or incorrect url, it will show a default server page with an internal error message. That message is not very helpful, so instead you should create a user-friendly 404 error page that links back to the homepage, shows alternatives for navigation or links to possibly related content.

There are plenty of WordPress plugins for improving your error pages. The 404 SEO plugin gives you a smart error page that will automatically display links to relevant pages on your site, based on the words in the url that wasn’t found.

16: Keep a Flat Structure Directory

Because search engines like to access quickly and easy to any file, you shouldn’t go too deep in your structure directory. Avoid things such as:

http://somedomain.com/shop/products/boats/motor/red_one.html

and use something like:

http://somedomain.com/products/motor-boats/red_one.html

Keep in mind that any page shouldn’t be more than three clicks away from your home page.

17: Use Search Engine Friendly url Names

Search engines cannot make sense of urls with dynamic and session id names, so instead of:

http://somedomain.com/?page_id=12

you should use a meaningful name with hyphens instead of underscores, like:

http://somedomain.com/fishing-boats-and-supplies

In WordPress you can configure that in the permalinks options page.

18: Design an Effective Footer

User your footer links to help search engines navigate through your site, replicating your main navigation and linking to the most important pages on your site.

An example of a good designed footer is the one found in CSS-tricks.

19: Use Breadcrumb Navigation

Consider using breadcrumbs as a secondary navigation aid. It makes it easier for users to move around your site. Be sure the text on your breadcrumb links describes accurately the content of the corresponding page.

20: Write Good Content

Finally, forget about keywords and all that, the best SEO advice you can receive is to just write good content, interesting articles that people will like and find useful.
Ask yourself what creates value for your users.