Web designers and developers have many responsibilities when it comes to building websites. From creating a solid layout for the front-end, to writing clean code so that the site runs bug free – there’s a lot involved. However, one thing that is often neglected and should fall on both the designer and developer is search engine optimization. Here are seven ways designers and developers can practice better SEO.
1. Avoid image heavy designs
It’s no secret that images often lead to heavy designs that can cause longer than desired load times. More and more data points to Google emphasizing page speed in their ranking factors. If you aren’t able to cut back on images, design images so that they can be repeated in CSS. With modern CSS, effects such as gradients and drop shadows can be achieved without using images as required in the past.
2. Don’t design navigation links in images
One of the easiest ways for Google to determine what a page is about is through the anchor text of a link. Navigation does just that, while also adding a medium of organization as well. With tools such as type kit available, the excuse of image based navigation is non-existent anymore.
3. Condense CSS and JS files into one document
As noted above, page speed is becoming a big player in the ranking factors. A quick and easy way to get a small win is by condensing CSS and JS files into one document each. For every document that is listed in the code a new call from the server is required, therefore increasing the load time. By decreasing that to just one call for each file type, you decrease the number of calls, therefore decreasing load time.
4. Keep header tag near top of code
Header tags often indicate the title of a piece of content. Frequently, this is where SEOs place keyword phrases that they are trying to rank for. Theories are that content near the top of an HTML document carries more weight than that of content in areas such as the footer. H1 tags should be used for titles of content.
5. Use CSS Sprites
At Pubcon South 2011, Aaron Shear, the SEO for Zappos talked about the importance of CSS sprites, a savvy way of combining images using CSS to decrease load time. While the concept of doing it manually can be daunting, Google recommends a great tool called SpriteMe, which I’ve seen great results with personally.
6. Keep the tag lines away from the top
One of the first things you want Google to see in your code is the keywords related to that page. Often designers put slogans and tag lines in the header of a design. This isn’t ideal as the first piece of content Google will see on each page is that slogan or tag line which won’t be related to that page. If you aren’t able to migrate this to another part of the site, it’s best to put it in an image.
7. Stop using text-indent:-9999px
Programmers have often used text-indent:-9999px to trick the engines into thinking there is an actual keyword in an image. If you’re forced to use an image instead of text, don’t try to fool the worlds largest and most sophisticated search engine. Use an alt tag. They know people do this and the team at Google has spoken out against this multiple times.
Here's some other articles that you will definitely find useful.