Working as a web designer and developer for some years, I heard the ‘SEO’ buzz word popping up from time to time. At some point I thought I knew everything I needed to know about it: Friendly urls, meta descriptions, optimized titles, avoid flash and frames, etc. But working in a SEO company for the last 6 months made me realize how much I didn’t know about it, and how many other things I still had to learn.
Doing SEO on your website, is like being on a diet. It’s not enough to eat healthy food, if you don’t do any exercise. SEO it’s a combination of important onpage optimization, with external factors, like finding those extra valuable links from other good websites, gathering link juice. Just like in Feng Shui, we need to balance the energies to assure the health and good fortune of our website.
In this post i’ll try to do a quick overview of some of the most important stuff every web designer needs to know about SEO.
Brace yourself. A long post is coming.
The Basics
Although I would like to assume you already know most of this, let’s go through it very quickly.
Title Tag and Meta DescriptionThis is very basic, but also very important as it will probably show in the search engine result pages (SERPs). So, as a web designer you should know a few things.
The Title of the page shouldn’t be to long (65-75 characters is a reference). It should be descriptive of the page content and if possible include keywords in the beginning.
The meta description tag should be a longer description of the page content. Although search engines might not use it as the most important source of content from your website for rankings, it is the primary source for the snippet of text displayed on the search result page. It can be as long as you want, but usually only around 160 characters are displayed.
Friendly URLs
The url should describe the content and be short at the same time. All modern CMS allow friendly urls, so avoid using the old ugly dynamic urls. Here is a quick example:
This: http://www.yourwebsite.com/cars/fiat-punto
Is much better than this: http://www.yourwebsite.com/index.php?c=2&id=27&sort=1
Adding a keyword in there will not hurt, as long as it looks natural. Remember that urls are not keyword sensitive, so no need to use upper-cases, in fact avoid them to keep it uniform along the site.
Hyphens – are the best way to represent spaces. Also, avoid sub-domains if the content is related to the website. Search Engines will treat it as a separate domain.
Headings
Headers are among the most important elements of the actual page content. They will help search engines on the interpretation of your pages content. You should stick to only one H1 if possible, although, if it makes sense, you can have more. This can be different from the page title, but should be equally descriptive of the content of the page. This should be followed by H2 and H3 headers for the rest of the content, indicating hierarchical important titles.
Indexable Content
This is a golden rule for web designers. Avoid using flash, text as images, or text hidden with javascript. Your content should be in HTML in order to be indexed by search engines. Non text content will probably be ignored by the search engine crawlers, but you can provide descriptive content for it. Stay away from frames, as they are hard to index by crawlers, and don’t forget to include alt attributes for images, description for the videos and alternative text for java applets and flash.
HTML 5 and CSS3 are so powerful that you can create visually awesome content without the need of images or flash animations.
Also, don’t try to trick search engines by presenting content in the code which cannot be seen by the user by using css or javascript techniques. You might even get penalized.
Content is King
The recent updates on the google algorithm changed the way SEO was being made and aimed at making relevant content more and more important. Although you as a web designer might not be responsible for the content of a website, there are some design tips you can follow to help the content work better.
Content Above the Fold
This is another golden rule for web designers. The more significant content you can get above the fold, the better. This is the content the user will see when he lands on your website without having to scroll. Of course you will still have to take in consideration the user experience and usability, don’t stuff everything in that space. Get the most important content there, like the H1 header and some text, together with an image to engage the user. You can use Google’s browser tool to see how the users see your website and what content is above the fold.
Keyword Usage
Keywords, keywords, keywords. You keep hearing this word on SEO related stuff. But that’s because it’s all about them. They are fundamental to the search process and the most popular search engines are based on them. As a web designer and not a producer of content you might not have control of keyword usage on the website but it’s important that you know this: you can and should use the keywords you want to rank for, especially in the title tag and header, but in a moderated way, do not over use it or you’ll probably be interpreted as spam. But it’s simple: If it looks natural, it’s probably ok. Google has an over-optimization algorithm rolling out, so remember: everything needs to look natural.
Crawlable Internal Links and Descriptive Anchor Text
Search Engines need links to get to the pages and crawl the content. It will not crawl a page that has no link anywhere on the internet to it. So make sure all the pages of your website have links to them. The anchor text linking to those pages should be descriptive of the content also.
That is valuable for the search engines. So, for example, when building the menu for your website, be sure to include all the important pages there and have concise and descriptive anchor text, both for user experience and SEO value. If there are pages that don’t belong in the main menu, be sure to link to them elsewhere in the website, like the footer. It is also good to know: search engines might give the same value to an internal link as they do from an external, so If your content is valuable then you should link to it yourself. Promote internal linking within related pages or articles.
Fresh and Unique Content
Google loves fresh new content. It’s no secret. So be sure that the website architecture supports the creation of new content and to include on your design space for it on the home page for example.
Consider implementing something like a blog and show the recent posts on the front page. Content creators for the website should be motivated to create new and unique relevant content so the website has more chances to rank better.
Duplicate Content
Duplicate content is a delicate issue on SEO. It’s something that will deserve more blog posts dedicated only to this subject. But mainly what you need to know is that Search Engines don’t like duplicate content, and can penalize for you that. One thing is easy to understand:
don’t copy content from other websites! But duplicate content often happens in other ways, and some times it really needs to. Some modern CMS have this issue, for example, when presenting you an optimized printable version of the content or an article with 2 different working urls because they belong to more than one category. First you should avoid this, but if it happens you need to know how to deal with it. If you want one page that presents duplicate content to redirect to the original one, use a 301 redirect. If you need that url to still be working, use a canonical meta tag. Although these solutions work differently and have different purposes, they tell the search engines that the url with the duplicate content is to be ignored and to consider the one referred.
This way the referred url will get all the attention from the search engines. We will talk a bit more about this techniques further down.
Social Sharing
This is not only important for SEO, but also for the overall success of your website. Social sharing will affect your rankings, get you traffic and increase the credibility and authority of your website. Google and Bing claimed they look at the social authority of a page and modern users not only expect to see good content, they look for trust signals and the number of social shares is one of them. So you should promote the sharing. Include social sharing buttons on your design, well placed and not obstructive, visible and easily accessible to the user. This is also a way to build your audience. Getting users to like your page on Facebook or follow updates via RSS, Twitter or email, will make the job of spreading the new content easely. So don’t forget also to include social follow icons on your website.
Avoid Ad Slots above the fold
This is a complement of the first point. Ads should not be the most important content of your website and Google will penalize you if you have to many ads above the fold. It’s all about user expectations and user experience. High quality content will rank better without the noise of the ads, because that’s not what the user expects to see when he clicks on the search result. Read more about it on google’s inside search blog.
Fix 404 pages and optimize the error pages
A user should never land on a 404 error page. If the link exists, the page existed at some point also. Make sure your website doesn’t have any broken links to improve the user experience. And just to make sure, build an awesome and engaging 404 error page and try go grab the user that just landed by presenting them with other content alternatives that might interest him.
User Experience Matters
Don’t build the website just for the search engine crawlers. The user comes first. It is known that the user experience matters in terms of SEO, so your website should have an awesome design, comply with accessibility and usability rules and cause an impression on the visitor. If the user is happy, search engines are happy as they exist to live up to user expectations.
This is some of the most important stuff:
Navigation
This is the foundation of your website. This is one of the most important sections for the user. They will have to be able to get anywhere they want on your website with just a few clicks. Behind a great website, there is always a great menu. Plan it well, make it beautiful and easy to use. Make it SEO friendly: don’t use non-indexable content like flash or javascript, use the latest CSS techniques and make it hierarchical and easy to understand, with short but descriptive anchor text.
Page Load Speed
Google openly said that page speed is now a ranking factor. So that’s definitely something you shouldn’t overlook. Try to have it load below 3 seconds. And that’s already too much! I’m sure that if you are a web designer you will know how to optimize the website to load faster.
Valuable Footer
Often overlooked, the footer is a great place to add valuable content and links. Not much for SEO but mainly for user experience. In the past webmasters would put on the footer site wide links, or exact match keyword links and use other SEO tactics to pass link juice. But this is a thing of the past, as search engines adjusted their algorithms to ignore this tactics or even penalize the websites that use them. So you have to be careful here. Don’t do anything that doesn’t look natural, like linking to much to unrelated websites, or using to many exact match keywords.
Use your footer to add valuable content for the user, such as navigation, contact information, or social network links. Always remember: it needs to look natural and part of the website.
Design Strategy – Consider using Personas
In the end, it’s all about having a good design strategy. Plan your design, do research, get to know your user. It’s not all about making it beautiful, it’s about making it work. Your website might have different kinds of users, and they will behave different. Try to understand them, spil them into categories and create personas. This personas will have different expectations, create landing pages for this different people to improve conversions. This is a long topic that would need an article of it’s own, but you get the general idea.
Good web design overall!
On a recent update google said We’ve made some improvements to a longstanding system we have to detect site quality. So be sure your website is top notch.
Lets Get Technical
This section is more aimed at the web developers than web designers, but should be in this list, never the less. Specially if you take on the role of webmaster of the website.
XML Sitemap
This is basic. Your website should have one or more xml sitemaps and they should be submited to the search engines.
This files have a list of urls that give direction to the search engines on how they can crawl your website. Most modern CMS already have this functionality built in, so you just need to grab the link and submit it submit it to Bing and Google’s Webmasters Tools.
You can read more at Sitemaps.org and build your own at XML-Sitemaps.com.
Robots.txt
The robots.txt is a file that should be stored on a website’s root directory (e.g., www.higherclick.com/robots.txt) to give instructions to the automated web crawlers, including search engine ones, that visit your website. You can indicate this crawlers wich areas of your website they are allowed or disallowed to view, and also to indicate the locations of your sitemap files and other parameters. You can read more about it at www.robotstxt.org
HTML Head Meta Tags
HTML head elements are pieces of code that go into the header of the document that are not visible to the user but are there give information about the page and to ensure that the page works correctly by including scripts, css and other stuff. Meta elements are typically used to provide machine readable data about the HTML document, like page description, keywords, author of the document, last modified, and other. We will look into some of the most important for SEO.
- Meta Robots
- Just like the robots.txt this will provide information and instructions for search engine bots but for the current page. Some of the most important instructions are follow/nofollow – it will say to search engines to follow or not to follow the links (or at least no to pass points) on the page – and index/noindex that will tell them not to index or not this page. This will override the instructions of the robots.txt but the crawler can only get to this page and check this instructions if first it is allowed by the robots.txt. Example:
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
- Canonicals
- This is one of the solutions to solve the duplicate content issue we talked before. Let’s just use a very simple example for you to understand how it can be used:
- www.higherclick.com/about-us.php and www.higherclick.com/about-us shows the same content, because altough they have 2 different urls, they are in fact the same page. Search engines will interpret this as 2 differnt pages, with duplicate content! So, to solve this, you add this to the file:
<link rel="canonical" href="http://www.higherclick.com/about-us"/>
This way the search engines will understand that it should consider that page, despiste the url that it’s visiting at the moment.
- Keywords
- This one is old and self explanatory. Although in the past this was a reference for search engines to understand what the page might be about, the large misuse of this feature by website owners made the search engines drop the importance of this. You need to know that currently this has close to no value for search engines, but it wouldn’t hurt to have some keywords up there anyway. Example:
<meta name="keywords" content="SEO, blog, web designers, tips" />
- rel=”nofollow”
- This instruction is similar to the robots meta tag nofollow but instead of applying to all links of a page, it is used on individual links. Example:
<a href="signin.php" rel="nofollow">sign in</a>
Page Redirects
This is another big one. But let’s keep it simple for now. The 301 redirect is the most used for SEO purposes. This says the redirect is permanent and search engines will redirect the link juice to the new url and present the new one on the results. This is often used when urls change or when you need to migrate to a new domain. The 301 redirect is mandatory if you want to keep page authority. This can be another solution when you have a few pages with duplicated content and you want to gather all the users and streght into one. You can do this by doing a 301 redirect to one of them.
Rich Snippets
Another thing SERPs are implementing are information based on rich snippets. Check this example, when you search for “The Dark Knight”:
The starts rating information and details about the movie are collected by the search engine from a type of structured data implemented by webmasters to mark up content in ways that are easy to be interpreted by the crawlers. This can be done for a variety of purposes to a a lot of different types of content from movies, books, recipies, events, persons, organizations, places, reviews, etc. There are a lot of good resources for this, including Schema.org and Google’s Rich Snippet Testing Tool.
Off Page
SEO doesn’t finish with the optimization of your web site. It continues offpage and it’s an ongoing process.
Link Building
This is one of the main tasks of SEO. And it’s always changing, as google changes his algorithm. Let’s say Link Building is the art of getting valuable links back to your website. Searching for that extra link juice that will help your website rank. This can be done in a variety of ways, but remember that this should be links from high quality websites, with good authorithy. Avoid links from bad websites and participating in link schemes otherwise you will be penalized. Guest Posting, useful commenting and valuable forum participation are generally among the most effective link building strategies.
Inbound Marketing – Get Involved
Times have changed, so have the marketing strategies. Inbound Marketing is all about getting people to find you easily and get natural interest in you, rather than bombing them with advertisement or offer deals. If you get involved in your target users community, if you create great and usefull content for them, if you show how valuable you can be, they will come to you. SEO is considered Inbound Marketing as it improves your visibility and you’ll be easier to be found. Creating valuable content such as eBooks, whitepapers and valuable blog posts are other ways to get attention and attract more traffic. Don’t forget also about the Social Networks, as they are an important source of traffic and a great tool to understand what your audience is, and what they want.
If you master Inbound Marketing, your website will do well.
And Remember..
It’s always valuable to extend your knowledge
In order to improve you can also learn the basics of keyword research and improve your programming skills. Understanding the trends and ranking for the best and most appropriate keywords is the fundation of SEO. And the more programming skills you have, the more creative and advanced optimizations you’ll able to do.
The Rules are always changing
Although most of the stuff written here will always be important for SEO, it’s important to bear in mind that things keep changing. The major search engines like Google and Bing keep updating their algorithms. So as a web designer you should keep updated with the latest of the SEO industry.
https://disqus.com/by/ila4omo/about/
https://soundcloud.com/ilamohamed2002
https://dribbble.com/ilamohamed2002/about
https://dribbble.com/shots/20870546-ipv4-ipv6