Servicing Nanaimo, Victoria, Duncan, Ladysmith, Lantzville, Parksville, Qualicum Beach, Courtenay, Campbell River, and other locations on Vancouver Island as well as clients world wide.
JAMAXX Web Design
affordable sites that are hard working... not hard to work on
Join Our Mailing List
**Warning!**
This article is, out of necessity, fairly technical, and may be difficult for those who have no familiarity with HTML The source code used to tell browsers how to present web content) to follow. If you fall into the category of being unfamiliar with HTML, don't worry if you do not understand everything in this article. I have attempted to write as basically as possible and include examples where they seemed to be required, in an effort to at least give the layman a basic understanding of the importance of various HTML elements. Even if, as a layman, you are not able to access or edit these elements, having some understanding of their existence and their importance to search engine optimization will give you the ability to communicate effectively with a web professional, who will be able to access and edit those elements for you. It is like car repair. I don't know enough about mechanics or have the experience to do most car repairs, but I can learn enough about mechanics to know what needs to be repaired and communicate effectively with a mechanic. Yes this article contains technical information you may never personally use in a practical way, but just knowing that information will allow you to better optimize your site, even if it is by hiring a pro to do what you now know is required, but are unable to do yourself.
Good structure of the markup code used in a website is very important for insuring good organic search engine optimization, and it is an aspect often overlooked, particularly by DIYers using WYSIWYG (What You See Is What You Get) Build It Yourself Drag 'n Drop Web Software that creates a separation between the person designing the site and the source code being generated. Without being able to see the source code and without having experience or knowledge in HTML coding and search engines, it is not immediately obvious to someone when their source code is potentially making it hard for search engines to index their pages properly, and ultimately less likely for users to find their site using search engines.
As mentioned above, site structure relates to the source code for web pages. This is the mysterious HTML code (Hyper Text Markup Language) that is not seen by the user, runs in the background, tells browsers what content you want displayed to the users, and to a significant degree, how you want it displayed. There are recognized standards for how HTML should be formed and if the standards are not met, your source code which is also read by search engines, will be more difficult for search engines to index. Browsers are very forgiving and a page with non-standard structure is very likely to appear perfectly fine to a front end user. However, search engines do not see web pages the way we do. They see only the source code and expect a certain hierarchy and structure. And search engines rely on the code to tell them using text, when there is important content in media (like images, video and audio files), because the search engines cannot see or hear the media files. To get an idea of how a search engine sees a web page browse to http://webcache.googleusercontent.com/searchq=cache:http://somewebpage.com/&strip=1. Remember to replace somewebpage.com with the domain name (or domain and file name) of some real site.
There are a number of strategies to ensure your source code is well structured, meeting standards, and ready to be easily indexed by search engines. A lot of this is fairly technical for someone without HTML experience. If you are unsure about any of these strategies, an experienced web designer can help you out.
Have a well formed HTML document structure.
When your source code is viewed you should see :
- a document declaration tag at the top <!Doctype html> (for newer pages using HTML5 standards)
- under the Doctype tag you should find opening and closing html tags (<html> </html>)
- nested inside the html tags will be opening and closing head and body tags (<head> </head> and <body> </body>)
- the head tags will contain tags that are meant to provide information about the document to the browser, so it can display the page properly, and to search engines so the intended pages are properly indexed.
- the body tags will contain element of the actual site content which will be rendered by the browser for display to the user. Some of these elements will require extra information if you want search engines to recognize and index the content and we will discuss that further on.
Include Keyword and Description meta tags.
Meta tags are found in the head of the html document structure. To optimize your site for search engines, it is important to include the Keyword meta tag and the Description meta tag.
The Description meta tag contains a description of the page or site. This description is used in search engine results, displaying just underneath the title of the site. A good description contains key search words, is no more than 25 words, and aptly describes what a user will find on the page if the link to the site is clicked. It is good practice not to use the title of your company or site name in the description. There is another tage (discussed further on) that will display the company or site name above the description, so including it in the meta Description tag would be redundant.
Many search engines like Google, do not place very much (if any) emphasis on the meta Keyword tag , relying more on the content and how the content is arranged to determine what words on the site are relevant in searches. But some search engines still make significant use of the Keyword meta tag, so it is good practice to include one. This tag contains a list of phrases and words that you want to be considered "key" in searches. The words in this list should be words that actually exist in the site content.
Examples of Description and Keyword Meta Tags
‹meta name="description" content="Award winning web design services on Vancouver Island including CMS web design, hosting, domain registration, site re-design, site maintenance and more. Consultations are free."›
‹meta name="keywords" content="web, design, web designer, responsive, cms, custom, nanaimo, joomla, wordpress, developer"›
Include a Robots meta tag.
This tag also goes in the html document head and it tells search engine bots whether the page should be indexed and whether links on the page should be followed. By default bots will index and follow links unless specifically told not to, but if you specifically instruct bots on each site page you want indexed, you can be certain nothing will stop them.
Example of a Robot Meta Tag
‹META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"›
This tag is instructing search engines to not index the page or follow links. Changing the content to "INDEX, FOLLOW", would tell search engines they should index the page and follow links.
Have descriptive title tags.
The title tag is found in the head section of an HTML document and serves two functions that are relevant to SEO.
- provides the text that appears on the browser tab for a web page
- provides the text for the link to sites in search engine results
- are meant to inform search engines as to what the content on the page is related to
Obviously then it is important that you put some thought into the text you use for title tags. The content of the title not only gives search engines an idea of what the intended page content will be, but also will provide important clues to users who see the title in search results. For maximum effect, try to include words that are highly relevant to page content and keep in mind that when the title is displayed as a link in search results, there is a limit to how many characters in the title will be displayed. If you want all of the title to be seen in results than restrict the title content to 70 characters (including spaces). If you are unable to stay under the 70 character limit, make sure the most relevant part of the title is at the beginning so users will have the best possible idea of what they will see after navigating to the page.
Example of a Title Tag
‹title›JAMAXX Web Design - Blog‹/title›
Remember where browsers are limited and help them out!
Earlier I mentioned that browsers see web documents as html tags and plain text. They are unable to recognize the content of a media file, whether it be an image, a video or an audio clip. If your web page contains any of these elements and the elements contain words that you want to be recognized and indexed by search engines, you need to help the search engines out a little.
Image tags contain an alt attribute (short for alternative) that is often overlooked and unused. The alt attribute is meant to contain a text description of the image that displays on the page.
Similarly, video and audio files can be connected to text transcripts of their content, allowing search engines to recognize that content on a page.
Another benefit of using alt attributes for images and transcripts for audio and video, is that it makes your pages more accessible to users with impaired vision or hearing. Such impaired users could be using special software that reads text content or presents audio content as text (in the case of hearing impaired users). Descriptive alt attributes and transcripts linked to audio and video provide a much richer and more accessible user experience for impaired users.
Example of Using alt In an Image Tag
‹img alt="A black stallion galloping across a grassy plain at sunset."›
Currently, there is not any standard way to to handle accessibility for audio and video using HTML 5 (it is being worked on though!), but there are work arounds that are well worth using and they can be found by searching the topic online or by asking an experienced web designer for assistance.
You are now prepared to look at the html structure of your site, whether you are doing it personally or instructing a designer to do so, and revise it so it is optimized for search engines are easily able to index your pages and users are more likely to find your site in searches.
Richmond Lauman
Search Engine Optimization Part 2: SEO Friendly Site Structure by Richmond Lauman is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
