SEO Web Design: The Blueprint to Higher Search Rankings

We all have encountered the word “SEO Web Design”. Some must have read it somewhere, some must have heard their web design company talk about it, and some must be providing the services for the same. Let us chat with the term quickly for those still aloof from this terminology.

Search Engine Optimization (SEO), also known as search engine positioning or organic (natural) SEO, means optimising website content and search engine popularity to gain high search engine visibility. The ultimate goal is to attract more potential customers to your website.

The start point of SEO services is generally when the website is ready for launch. But actually, this should be moved right to the planning stage of the website, and the design of the website should be made so that the website becomes search engine friendly. Many web designers start designing the website but hardly know what SEO and ideas they can implement in the early stages of web designing. If this is done at the early stages, the final outcome would be a website that the search engines cannot stop falling in love with. Here are some points which web designers or people looking at getting a website can keep in mind while designing websites:

Flash is not too Flashy – Flash in websites is good, but do not overdo it. Flash can be SEO-friendly and web-accessible; however, open web languages like HTML, CSS and JavaScript serve the best purpose. Flash is good for providing a nice interactive experience to the visitor on the site, but then again, search engines are not too good at reading the content in a Flash movie. In case you are using Flash, ensure that the HTML page contains vital information on your site links, and these are not embedded in the Flash file. Avoid using Flash for the navigation menu. Instead, try DHTML (Dynamic HTML).

Website Content – Search engines use a text-based reader called a “spider”. These spiders read a web page from left to right and from top to bottom while ignoring the design aspects. They are all interested in the text – especially the top 20 lines of your webpage. Make full use of this early paragraph area to include relevant keywords. The numbers vary from engine to engine, but you can assume the first 50 words are crucial, the next 50 are important, and the 50 following are likely to be read. Try to get the important keywords — the expressions you expect your visitors to use in their searches — included in the first 150 lines of the text.

Directory Structure – Often, web designers tend to keep a flat directory structure where all the website pages are in the ROOT folder. This is good if the website is small and there are few pages to maintain. But breaking down the web pages into different sections works best for big websites.

For example (see figure), a website selling books may have its home page in the root folder while segregating each book webpage in its respective directories like Science-Fiction, Adventure, Cooking, etc.

A quick tip: do not plan to put your web pages more than three levels deep. A good hierarchal structure can significantly affect how well the site gets spidered and pages re-indexed in the search engines.

File Names – The filenames in a website play a crucial role. Using a file name for a web page like “first-page.html” or “xyz.html” would load the page fine when accessed but will certainly take away a chance of stuffing a keyword. Try to name the pages so that they carry the webpage title instead of “page1.html”, “page2.html”, and so on. Taking the earlier example of a website selling books, it would be a good idea to name the web page selling a book on cocktail recipes as “cocktail-recipes.html” instead of “page1.html”. Some other points to keep in mind are:

• Do not use space in the file names; space is denoted as %20 when rendered in a URL. Such a page like “my web page.html” would look alright when you see it on your computer, but when called from a browser, it would be rendered as “www.yoursitename.com/my%20web%20page.html”. This makes it difficult for people to remember the URL.
• Separate the words in your file name with hyphen (-). Since we cannot use a space to separate the words in a file name, use a hyphen to split the words so that they become easy to read and identify. Moreover, the hyphen character is regarded by search engines as a word separator, much the way a space is.
• Use lowercase to name your files. Under Windows OS, you may have got used to the fact that “MyWebPage.html” refers to the same file as “mywebpage.html”. This is not the case with all operating systems. For example, Unix-based systems like Linux and FreeBSD are considered two different files.

Image Names – This is a common mistake found in websites. Many webmasters or graphic designers prepare the design using software like Adobe Photoshop and then use the automatic slicing tool to slice the images. Next, they bring this into a static HTML and replace the places for text with actual text and white spaces with spacers to reduce the file size of the web page. But they tend to forget that the images carry names like “image01.jpg”, image02.jpg”, and so on. For those who take care of renaming the images, many times, rename them as “logo.jpg” for the company logo or “header.jpg” for a header image. This should be avoided. The idea is to name the actual file correctly by giving it a key term. For example, “blue-tshirt.jpg” would yield better results than using some random name like “image01.jpg” because this gives the site extra context. Also, ensure that when these images are put into the website, necessary ALT tag content is provided. The benefit is that sites like Google Images can index them better, and after all, that is another way of getting traffic to the website.

Sitemap – A sitemap is a tool that aids search engine crawlers in gaining contextual meaning about a site’s web page. Create a site map that links to the major sections and sub-sections of the website. Sitemaps make sites built in Flash and other non-HTML languages searchable. Preferably, the site map should be linked to from every page, and the recommended file names for the site map are “sitemap.html” or “site-map.html.” You can even use online sitemap generators, which crawl the website and prepare an XML sitemap. Google recommends using this and submitting it to Google Webmaster Tools.

Anchor Text – The anchor text is the text inside the “A” tags that links to other pages either inside the website or to some other website. The anchor text needs to describe where the link takes the visitor, which is even more important for search engines because it tells its crawlers where the link is going. Avoid using words like “Click Here” as an anchor text. Instead, use a relevant keyword for that web page or website.

Title – It can be said that the website’s title is one of the most important factors for a successful search-engine-optimized website. The title is nothing but the text that you see in the reverse bar on the left side of your browser. The title is crucial for ranking your website as it is this title tag used by search engines to show your listing in search results. For example, a website of a book store in Ahmedabad carrying a title tag like “Welcome to ACME” will not mean much. People probably won’t click on that link because they don’t know who you are. It would be better to rephrase the title to read “Buy books online on adventure, cooking, science fiction and more in Ahmedabad”. It is also a good idea to have each page on the website using a unique title and should reflect keywords that are relevant to that page. Remember that it is not only the home page that will lead a visitor to your website, so each page must be optimised.

META Tags – Meta elements are typically used to specify page description, keywords, author of the document, last modified and other metadata. Here is an explanation of the common meta tags:

• Description: The description is displayed on the search engine result page and helps to distinguish your site from the others in the list. The description tag should be written in such a way that it will show what information your website contains or what your website is about. Write short and clear sentences that will not confuse your visitors.
• Keyword: The keyword tags should contain between 4 and 10 keywords or key phrases. They should be listed with commas and correspond to the major search phrases you target. Every word in this tag should appear somewhere in the body, or the website might get penalised for irrelevance. No single word should appear more than twice, or it may be considered spam.
• Robots: One other meta tag worth mentioning is the robots tag. This lets you specify that a particular page or directory should NOT be indexed by a search engine or which pages in your website the spiders should follow and index.

Valid Code – Many webmasters or designers overlook a very important aspect of website design – the validity of the HTML code. Search engines have to parse the HTML code on the website to find the relevant content. If the HTML code contains errors, search engines might be unable to find everything on the page. Search engine crawler programs obey the HTML standard and can only index the website if it complies with the HTML standards. After the website is designed and the relevant HTML is generated, validate the HTML and CSS code and make the code W3C standard. A quick tool to validate the HTML code can be found at https://validator.w3.org, and to validate the CSS code, visit https://jigsaw.w3.org/css-validator

Graphic and web designers love beautiful websites, and SEO experts love optimised content and code. Neither should be ignored as these days, both are equally important. What good it would be if you have a nice and flashy design but no one to visit the site as it is not loved by the search engines? Keeping in mind some basic web design principles during the planning stage would give immediate benefits and reduce the workload of SEO companies or experts.