How to Optimize Your HTML for SEO

Optimizing your website’s content doesn’t require advanced technical skills but does require some familiarity with HTML. (If you’re entirely unfamiliar with HTML and basic HTML editing, see the Quamut guide to Building a Website before getting started.) This section explains how to modify the various key components of your site’s HTML files for SEO, including title tags, meta tags, and others.

The HTML title tag determines the title of your site in SERPs and appears in the top bar of most web browsers when a user is looking at your site. The page’s title will consist of whatever words you place between the title tags in the page’s HTML. HTML title tags appear near the top of the HTML file and look like this:

Search engines weigh the content of your title tag heavily, so it’s important to include 2–5 relevant keywords in your titles. Your title should begin with the name of your company (or website), followed by a brief, keyword-rich description that reads naturally. Here’s an example title for a fictitious company called Steve’s Poodle Grooming:

This example contains the keywords poodle grooming, dog groomers, and nyc. Note the vertical bar, “|,” between the title and the brief description. This symbol gives a clear, visual separation for users. For pages beyond the home page, you can use this bar to separate your company name from the title of the specific page. Here’s an example for a page that offers dog clippers for sale:

Meta tags describe the content of web pages and can help SERPs determine how to index your pages. There are three main types of meta tags:

All of these tags appear near the top of a page’s HTML file, below the title tags.

Keywords meta tags look like this:

Even though major search engines give little weight to keywords meta tag content, it still doesn’t hurt to list your site’s most important keywords here. Here’s an example of keywords meta tag content for Steve’s Poodle Grooming’s website:

Description meta tags look like this:

This tag typically determines the content of the description area in SERPs, and many search engines give it considerable weight. Since both human users and search engines may see the contents of this tag, you need to strike a balance between natural-sounding and keyword-rich text. Aim for 10–30 total words and 5–15 keywords in your description meta tag. The example below is rich in keywords but still reads like a natural description of the example site.

Much like the robots.txt file, robots meta tags allow you to specify whether crawlers should index your pages, and if so, whether they should follow links, and so on. If you don’t have access to your web server, or you cannot create a robots.txt file for any other reason, the robots meta tag can serve as a useful alternative. The robots meta tag looks like this:

In the example above, robots are instructed to index this page and follow any links it contains. Since a robots.txt file and the robots meta tag serve the same purpose, you should use one or the other, not both.

Heading tags are used to style text as headings. For instance, the title of an article on a web page is styled with heading tags. Heading tags can appear anywhere within the main body content of an HTML page. They look like this:

Each heading tag consists of an “h” followed by a number, such as h1, h2, or h3. The lower the number, the larger the font size and the greater the importance of the content to search engine crawlers (h1 is the largest-sized heading; h6, the smallest). So, for instance, crawlers will put more weight on the content inside an h1 heading tag than on the content inside an h3 tag.

Your headings should include keywords that are relevant to the content of the page. Here’s an example heading from a page on Steve’s Poodle Grooming expertise:

This example contains some well-chosen keywords—Steve’s Poodle Grooming, standard, miniature, and poodle—but still sounds like a natural page heading.

Anchor tags are used to create links on websites. Search engines place high importance on the content within and around anchor tags, so it’s important to include keywords not only in the link text itself but also in the text surrounding your links. For example:

The actual link text is just Trimming and Clipping, but dog trimming and clipping services will also be given extra weight because of their proximity to the link. Though not all your links need to include keywords, the majority should include at least one. The text surrounding these links should also contain at least one keyword or phrase.

Search engines can’t tell what an image contains unless you provide this information in the alt attribute within the image tag. The image tag and alt attribute look like this:

The alt attribute should be a very brief, accurate description of the image and should contain 1–2 keywords. For exam­ple, an effective alt tag for an image of a freshly groomed poodle might contain the following:

Groomed and poodle are both keywords, and the text accu­rately describes the image.

The doctype tag appears at the very beginning of a webpage and tells browsers and crawlers which standards a page uses, such as the version of HTML used on the page. Valid HTML is web page code that doesn’t contain any errors. Search engines reward pages that include a doctype tag and valid HTML. Doctype tags appear at the very top of web pages and look like this:

Web design software programs such as Dreamweaver can produce this complicated code automatically. You can also find standard doctype tag examples by searching online for “doctype tags.” For best results, include a doctype tag at the top of all your web pages and ensure that your HTML code conforms to the appropriate standards specified in the tags.

HTML often contains elements of other web programming code, such as JavaScript and Flash. These elements can potentially cause problems for search engines and should be used carefully, as described below.

JavaScript is a web programming language that can perform sophisticated web-based tasks, such as tracking the length of time a user remains on your site. Remember that search engine crawlers don’t see web pages the same way that humans do. Crawlers see all the code for each page, regardless of whether that code is visible to users. If your HTML begins with a section of JavaScript code, crawlers will see that code first and may give more weight to it than the content you actually want it to see.

To avoid this problem, it’s best to move all of your JavaScript code to a separate file, then reference this file in the web pages that need it. To do this, you need to include a script tag such as the one below:

This code tells the webpage to go to javascript.js to get the JavaScript it needs. Search engine crawlers won’t see all your JavaScript and will instead focus on the more important SEO-friendly webpage content that your users see.

Adobe’s Flash software makes it possible to embed sound and video into web pages. Though search engines are getting better at indexing Flash content, if you decide to use Flash, it’s still a good idea to create an alternative, non-Flash version of your website as well. A common, effective way to do this is to offer links to both Flash and plain HTML versions of your website, accessible from your homepage. The HTML version should be SEO friendly and offer an appealing alternative for users with slow connections, because Flash pages take longer to download than non-Flash pages.

Cascading style sheets (CSS) is a system for laying out and styling web pages that works in tandem with HTML. CSS can often provide a more SEO-friendly alternative to traditional HTML methods.

For instance, many web pages still use HTML-based frames to divide a web page into sections. Frames can confuse crawlers and can prevent pages from being indexed. If your site uses frames, consider using CSS to redesign it without frames