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:
I can’t stress enough those two points. There have always been a debate about if you should use the <h1> 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, <ahref="#">Click here</a>
<ahref="#"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.
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.
The search engines should be able to read your navigation as a nested list to index it properly:
9: Be Careful When Using Flash
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:
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:
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:
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.