Building links, social media, metadata and targeted content are a few important aspects of search engine optimization (SEO), but in its simplest form, website design is the first step.
Without both functional and aesthetic design, many of the above SEO tactics can be for naught. Building great SEO and having an antiquated or dysfunctional site can turn the incoming traffic away quickly, or make it difficult for them to do something as simple as find the content they are looking for. Likewise, having a site that is beautifully designed and functional but has no SEO can be futile. It is like having a party but not inviting anyone.
The first step is to design a site that functions as well as it looks and offers an opportunity for search engine optimization. As stated above, links into your site are an important portion of great SEO and to draw these links, your site must be attractive. Typically websites that please on a visual level tend to sacrifice the SEO and vice versa. This doesn’t have to be the case.
Most sites that can be described as “visually appealing” are graphic heavy. Graphics and images look nice, adding a visual element that even the most advanced CSS cannot match. In most cases, retail stores use images for their products. Home pages for instance, usually have a set of images in a slider or a set of images in a panel. Usually the only SEO value you’ll get from an image are the title and alt tags as none of the text on an image can be crawled.
Unless…
Text overlays, using JavaScript or CSS, is a good way to use an image but still gain SEO and functionality value. For example, if you have an image on your index page but you do not want to use text , no matter how relevant it may be, because it may disrupt the design, you can do both without sacrificing your clean design. By using a text overlay and a simple call-to-action such as “shop here” the user will hover over the image before clicking and text will overlay the image with content. This content should be relevant to the image such as product information, but will only show during the mouseover. This content will be crawled by the search engines, not interfere with the intended design and provide more information to the user.
Original Image Text Overlay
Image with Text Overlay from Sony.com
Another method are divs that can be expanded. Similar to the idea of the text overlays, the expandable div provides a comparable solution. A row of images that when clicked on expand to expose content and/or more links again protects the envisioned site design. This also provides “crawlable” content for the search engines and information for the user. Again, a call-to-action in text or as an “arrow” is needed to drive the user to click and expand the div.
The H1 is one of the most important tags for SEO. Many times it can be hard to place this piece of text on a webpage in an aesthetic way. One way to do this is by using a web font. Web fonts are stylized fonts that can be made to look like they are part of the image. Web fonts can found online offered by numerous sites and there are many font styles. By giving the appearance of an image with text, the web font can still be crawled by search engines.
Combining all of these site design techniques helps to create an aesthetically designed, SEO friendly and functional website.