Web Designer SEO Basics

Most articles on the web today on the topic of SEO deal with specifics of ranking your website high in search engine results. But, at our Bangkok web development agency, it is important to teach our web designer, SEO basics. Here is a short list of SEO considerations that a web designer should take into account.

Let me start out by defining the general SEO basics.

SEO refers to the idea that links to your website, and from your website, contribute to the search engine rankings of your site. The goal of an SEO exercise is to optimise your content with your visitors as the primary concern.

This is all good, but define some of the issues that a web designer may need to consider.

Text in Images

Let’s take a simple home page design as an example.

A designer creates a home page with a beautiful full screen image and a heading with the company name and a tagline. Across the top is the company logo with a menu with About, Blog and Contact Us.

In order to save on development time, the designer provides the full screen image to the developer with the text embedded in the image.

From a visitors perspective, everything looks fine and the simple message about who owns the website is clear as is their purpose. However, when a search engine crawls the website, it only sees a couple of images and the standard menu choices. It sees nothing to tell it what the website is about.

A search engine crawling the website will not be able to distinguish text that is embedded in an image. Web designer SEO basics Tip number one is, “Do not include text in any images unless absolutely necessary”. A good quality image should be provided and the web developer should know the method for placing the text on top of the image in a manner that is still human readable.

Page Headings

Another Web Designer SEO basics tip relates to page headings. A good content writer breaks up a page with a heading to identify the topic of a page section. A web designer may want to design the headings in a specific font style not available to most browsers. So they design every header as an image in order to control the font style.

SEO crawlers use the heading texts as a primary indicator of the topic for each web page on your website. It is this text that helps rank a web page, and the website, for specific terms or word groups. So Web Designer SEO basics Tip number two is, “Do not replace Heading text with images”.

Image sizes

Image size and density should also be a consideration for the designer. Images do not need to be any larger than 1920 pixels in width. The width to height ratio should be 4:3 or 16:9. Most images should be 72 dpi. A density any larger, like 300 dpi, is more suitable for print and not a computer screen.

If a large image size is used, the file size is usually very large as well. Providing images only as large as the need to be helps the website load as quickly as possible. SEO page performance is a key element for search engine placement. Using 300 dpi image also distorts the size of the image and make them display much larger on a computer screen, which displays at 72 dpi. While this is not an SEO issue, it does make for a better user experience.
So Web Designer SEO basics Tip number 3, “Optimise the images for the website”.

Image topic and Quality

The image that is used should take into consideration the text or topic it is representing. This makes it difficult for a web designer if the content has not been created just yet. As an option, placeholder images can be used instead until the content is better defined. Then the designer can search for an image that meets the criteria called out in the content. This lets the web developer assign an Alt tag and Title to the image that also reflects the content and the topic of the image. Search engine use these tags to help when indexing images.

The designer should also ensure that high quality images are used throughout the website. This should be an image that has taken into account depth of field, coloring and lighting. A bad image will result in a bad user experience.

Our last web designer SEO basics tip is to “consider the context that the image represents”.

Web Design SEO Basics Wrap-up

These are the web design SEO considerations we deal with the most. I am sure there are others, but these are at the top of the list. From a web developer perspective, bad code can damage SEO. Likewise, bad web design practice can also be damaging to a websites SEO.

In summary, the top web designer SEO basics are:

• Do not include text in any images unless absolutely necessary
• Do not replace Heading text with images
• Optimise images for website use
• Relate content to the representing image