SEO for Website Images

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.