You’re probably tired of hearing it, but SEO is important in web design and can determine just how successful a site is at attracting organic traffic. If it’s not a consideration in the design of your site, the site simply won’t perform well organically, regardless of how beautifully designed it is. SEO should factor into your design early on so you don’t have to make as many SEO-related changes later on once you or your clients start realizing that the site isn’t bringing in as much organic traffic as it should. Here are a few tips on how to design your site, not just to be pretty, but to rank as well.
Understanding the Importance of Keywords
There was a time when you could just stuff a page full of the keywords you were trying to rank for and you would rank just like that. All you had to do was include your keyword more often than your competitors did. Thankfully, search has come a long way from that, and the sites that used to optimize through keyword stuffing have either changed their SEO tactics or are long gone.
According to Harris Arshad, CEO of web marketing agency Two4Seven:
Keywords, key phrases, and key terms are the bread and butter of SEO and search engine marketing. Smart keyword variety, strategy and analysis are a big part of how it’s completed. Your keyword selections could reflect what you do, where you are, what you really like, your skill, or maybe your brand terms. Be sensible; for example it might be too late to overcome Amazon for the phrase used, health books.
Great, so now you know what keywords, key phrases and key terms are for. But how do you use them in web design? Search engines don’t actually see your site, they feel them the way a blind person would read using Braille. They can’t see a picture, they feel for the Alt tags associated with it to tell them what it’s about. Keep in mind that even if a certain element of your site won’t necessarily appear in text form to the user, there might be aspects of it that do to search engines.
Just don’t cheat and over-stuff everything with the keywords you are targeting. Just use it and some synonyms a few times, within context and you’ll be fine.
Images Contribute to SEO Too!
As mentioned, while search engines like Google don’t necessarily see the images and other visual aspects of your site, they can “feel” them through things like their titles, Alt tags, and captions. However, don’t cheat by using every title, Alt tag or caption as an opportunity to stuff your keyword. Search engines are sensitive, so be as honest and descriptive of the image as possible.
Before you upload your images though, make sure they are web-friendly. Images that are too large will hurt the loading time of your page and make it lag. Before, I would have recommended keeping it VGA size or smaller (640 x 480), but monitors with larger screens and resolutions have resulted in sites being designed for these larger screen sizes that use larger graphics and other visual elements. So the best thing I would recommend is to keep your images at 72dpi and under 100kb in size.
Creative Ways to Design for SEO
Of course, web designers typically want nothing to do with tags. But designing for SEO doesn’t have to be that way. Carrie Cousins of DesignShack.com has another way to make it easier for search engines to perceive your images:
Visuals with expandable content are also a great option to provide more for search engine crawlers. Consider adding mouse-over states for images or an expandable div for a multiple image frame with full descriptions of images. This is important for all images, logos and visual calls-to-action on the site.
One other little important nugget of information? Design banners and other graphics using webfonts, HTML and CSS when possible. (And when it is not, treat these items like images with complete descriptions.) By creating pieces that use standard HTML, with markups for body type, H1s and bolding, etc., search engines can better read them.
A mouse-over has two states: the static state and the mouse-over state. The static state can be that of the image, while the mouse-over state can be descriptive text. This allows search engine bots to crawl the image and determine its context based on the descriptive text from the mouse-over.
Multi-image frames are common on ecommerce site for organizing multiple products for users and provide a simple method of navigation. However on their own, they can’t really be read by search engines except for Alt tags. By adding an expandable div, you can have descriptive information pop up when a user clicks on one of the images. Obviously, the description would provide something crawl-able for search engines to scan.
Don’t Forget About Social Media
While all of the design advice here has been geared toward getting Google and the rest of the search engines to crawl your site more and give it better rankings in the SERPs, you also can’t forget about social media. According to 1stWebDesigner.com:
Link building is perhaps the number one reason to jump on board the Social Media bandwagon: the process of visitors sharing links within their own network can result in a large number of inbound links. In summary, social media can provide an organization with an affordable channel that accomplishes results.
Facebook and Twitter are the most obvious social networks where you want to establish a presence, but don’t forget about Google+ since it is the best for SEO because it is indexable. Make it easy for users to share content from your website by placing Like, Tweet and +1 buttons at the bottom of every post. Also, make a social media box that includes all of your social media accounts and place it above the fold if possible.