Today most web designers do more than just design the look and feel of a web site. They often play a major part in writing the front end code. This means that a big part of the SEO or Search Engine Optimization responsibilities should fall on the designer. However, there is a large number of web designers that don’t understand this subject well enough to create a site that is fully optimized for search engines.
This article is here to provide some important tips that will aid the average and even above average web designer in improving their SEO skills.
1. Make the code prettier than the design
When building the front end of your site, make sure to use semantic code. By using descriptive tags to structure your pages, search engines will be able to read and have a better understanding of your content. This will also make the process of styling your site much easier and cleaner.
2. Use but don’t abuse your keywords
Keywords are the words that describe your content. It’s important to have them appear in strategic places throughout your page, such as: URL, title tag, and main heading tags. It’s also important to have it appear often in the body of the content, but not too often, which might cause your content to be penalized for keyword stuffing.
3. Avoid using Flash for navigation
As tempting as it is to whip out some nice looking drop down effects for your site’s navigation using flash, don’t do it. Search engines have trouble reading flash files, which means the links used in the navigation can’t be followed.
4. Use unique page titles
Each page on your web site should have a title attribute, and each title should be unique. If you use the same title for every page, search engines will think that every page on your site is about the same subject.
5. Don’t forget about images
Make use of the alt attribute of an image to properly describe it. As smart as search engines are, they can’t see what an image looks like. Failing to this can cost you substantial traffic from image searches.
6. Don’t use generic links
Search engines place a high importance on links. So when linking to relevant content, be sure to use a word that describes the content. For example, if you were giving your reader a link to learn more about Photosop, use something like “Learn more about Photoshop” as opposed to just “Learn More”.
7. Don’t use images to replace text
As designers, we always want to make things look as good as possible. This means sometimes replacing ugly browser rendered heading text with a nice smooth image. Try to avoid doing this. Again, search engines can’t see the contents of an image, and this is where you should be putting your keywords.
Edit: Looks like I misspoke(or mistyped) on this one. There are valid ways to accomplish this, such as FIR.
8. Use AJAX sparingly
Ajax is great for enhancing the user experience, but try not to over do it. Content generated with ajax can’t be linked to. A good rule of thumb is: if what you are loading with AJAX can be an individual page, then avoid using it.
9. Get indexed quickly
To get your site indexed in search engines in a timely manner, try getting it linked to by a popular site in a related niche. Submitting it to Google also works, but sometimes it can take several days if not weeks.
10. Build incoming links
The number and quality of incoming links plays a big role in the placement of your site in search results. Having quality and unique content is a good way to get people to link to your site. Another way is to be generous with your own links. Visit site likesvegas.com to buy Instagram likes today and grow your business profile on Instagram
11. Use a consistent URL
When you build a site, decide from the beginning if you want to use or drop the “www”. Once you decide, stick with it. Search engines, for example, see www.webdesignledger and webdesignledger.com as two different sites and as duplicate content, which they do not like.
I can’t agree with point No 7 Don’t use images to replace text.
I’d rather say: Do use images to replace text but use them wisely. There’s a lot of techniques designers can utilise to use images instead of text if they really need to.
From Google view website will be semantically correct, from end-user point of view will be esthetically pleasant.
Also designers should use alt tag to describe images they are using.
Greets from Ireland!
Yes, that’s the only point that sticks out as incomplete. With FIR https://en.wikipedia.org/wiki/Fahrner_Image_Replacement and similar techniques you can feed text to search engines and screen readers while keeping things pretty.
Primer on basic SEO coding techniques: https://www.designicu.com/blog/kill-your-seo-consultant/
I also agree that No. 7 can be ruled out. You can do:
Title of Header
and then
h1 {
text-indent: -1000px;
overflow: hidden;
display: block;
width: ###px; /* this can be 100% depending on design */
}
h1.class {
height: ##px;
background: url(image.jpg) no-repeat;
}
If you want to make images headers SEO friendly, requires some work, but if you do stuff right, you can get it done.
Thanks for the feedback. I made an edit on #7 to clarify.
Flash is nice and if you still want to use it that’s fine. Most designers use flash for navigation, just make sure at the footer of all your webpages you add text links as well so Google and other search engines will have an easier time reading them.
Interesting feedback, and I agree with #7. Good tips!! Maybe you can write incoming links tips. Regards!!
I’m on the fence about the points made regarding Flash.I believe it depends on the context in which flash is being used.
For example: https://www.beatport.com uses an interface entirely based on flash. It’s soul purpose is to provide users with electronic MP3’s.
As long as someone can enter “beatport” into a browser they aren’t going to run into any problems. (they find the site, go to the site and get songs)
But for an article based site like https://www.30sleeps.com/blog it’s important to reference as much as possible in the articles, so the user can find stuff on related enquirers not just the site.
I really don´t agree with point 3!!!
Flash is the best thing on the web.
It seems everyone is in agreement about #7 but I was very surprised that no one mentioned sIFR https://www.mikeindustries.com/blog/sifr/, it changed my entire way of designing having the ability to utilise more fonts in headlines/navigation etc.
Jerry Low has recently written a guest post on Redswish covering very similar bases:
https://www.redswish.co.uk/10-seo-elements-all-websites-should-have/
Not pimping – I just think it might be relevant!
a Awesome tutorial
I disagree that most web designers use flash for navigation. I haven’t met one in years who does.
Flash has too many usability restrictions (plugins, mobile, etc) and is so cumbersome to change and edit, should the site evolve (which it should)
Some lovely suckerfish on ‘roids dropdowns are all you need!
Also, as an SEO tip: match title tags, URL and the h1 to the pages content. This gives the page a clear theme and thus more relevance.
@ jess hammer
i see new flash websites daily.
For websites like interior design etc i think this is the best choice.
Flash can be a great design tool for the site but don’t forget this is an article about SEO. Currently search engines can’t read with in a flash file. So what you do in flash won’t be crawled.
very useful il have to start using FIR in my sites as am always using images for headers !!
i think not all point i’am agree but thats all not must have in SEO, i think!
Using Flash is fine if you have a developer who knows how to use it in conjunction with SEO. I do not think the standard Flash designer would know all the techniques required.
For instance, XML can be used to get around SEO for Flash nav.
The nav should be built dynamically from the start, so if the site does evolve, all you need to edit is an XML file.
Also deep linking can be done for use with FWD/BACK and bookmarking Flash.
If it were so bad, car sites would not use it at all, yet there are car site entirely made in Flash. Don’t tell me they completely avoid SEO.
I do agree that Flash becomes an issue for mobile, but then again I also believe that if youw ant people to use your content while mobile, a separate site should be served containing content that is more useful while mobile.
It is a toolbox… use the appropriate tools from the start to best fit your needs, plan for SEO from the start, and you should be fine whether you use CSS or Flash.
12. Create a sitemap, especially on big sites, which allow search engines to crawl your website easily.
My site was no where in the search engines, but by following the basics like these, I am now very much visible on search engines like google, bing, and yahoo. I really like to appreciate your contribution.
Put your main keywords at the top of your website because searchengines judge words at the beginning of a website more relevant than words in the center or at the bottom of a webpage
Thank you so much for another great article. Where else could anyone get that sort of information in such a perfect way of writing? I’m having a presentation next week, and I am on the look for such information.
You might have heard of “Google bombing”, where many people link to a certain page using certain text and boost that page to the top of the search engines, even though that page might be on a completely different subject. This is because search engines use the words in your link text (otherwise known as “anchor text”) to figure out the nature of the page you’re linking to. This can be used to your advantage in your on-page SEO efforts, giving your pages a little boost for your keywords.
I use the Firefox Web Developer tool bar for this, which is very useful for quickly checking new pages and CSS. It’s a great idea to bring designers into the SEO equation.
I agree that #7 shd be used wisely. Especially when you have a stunning design that doesn’t come along with SEO guidelines. And its perfect that you can put that slogan/reference/subheading stuff and pure content separately.
Nice post. Images are often overlooked in SEO, and can truly be beneficial.