How to Use H1 Tags and ALT Attributes

by Ben Johnson - Posted 12 years ago

 Using H1 Tags and Alt Attributes for SEO

HTML Tips for Web Design SEO

SEO begins with the creation and coding of your website. If you are a web designer or have one working for you, make sure they are aware of how to create a good design, but also a good design that is optimized for the search engines.

Content that readers see is important for SEO and for user experience.  But the content that the users don't see, the HTML coding, is important for the search engines to properly rank your site. Paying close attention to both the user content and the coding will create the perfect SEO combination.


H1 Tags

H1- H6 Tags are ways to tag your headlines of your website in the HTML which can be used by search engines to identify your most important content.  Your most important Header should be labeled H1, second most important H2, and so on.

By giving a headline an H1 tag, you are essentially telling the search engine "This is the most important thing on this page."  So, use these headlines to your advantage. 

For example:  If you are a concrete staining business, rather than having a H1 Tag on your Testimonials Page read a generic header like below

Testimonials

you might want to consider labeling your most important header with a keyword, such as

Decorative Concrete Reviews

 or some other variation.  You can then get more specific with the h2 tag

Concrete Staining Reviews

.

 This will create a key phrase 'Decorative Concrete Reviews', so users searching for business reviews for decorative concrete will be more likely to find your website.  This means you will also need to pick good, descriptive headers for your web pages. 


ALT Attributes

The ALT attribute is a way to label images in HTML.  The ALT Attribute provides text replacement of your images if a user is unable to view the image.  It also provides a description for search engines, which also do not view images. Google emphasizes the importance of including ALT Attributes, and ranks ALT Attributes high for keywords:

Images: Use the alt attribute to provide descriptive text. In addition, we recommend using a human-readable caption and descriptive text around the image.

Here is an example of what an ALT tag would look like in the HTML:

alt="Software Development" />

Rather than making the ALT text a description or just keywords of your images, it should be a stand-in for your image. Here is a good way to think of it: What message is your image conveying to a site visitor? This message should be in your ALT text.  For example, if you have an image of money and a nice car to indicate success that results from an eBook you are selling, you would want to put the Alt text as 'Succeed' or 'Succeed with eBook Online System'.

Some Alt Attribute Guidelines:

  • Always add alt attributes to images. Alt is mandatory for accessibility and for valid XHTML.
  • For images that play only a decorative role in the page, use an empty alt (i.e. alt="") or a CSSbackground image so that reading browsers do not bother users by uttering things like "spacer image".
  • Remember that it is the function of the image we are trying to convey. For instance; any button images should not include the word "button" in the alt text. They should emphasize the action performed by the button.
  • Alt text should be determined by context. The same image in a different context may need drastically different alt text.
  • Try to flow alt text with the rest of the text because that is how it will be read with adaptive technologies like screen readers. Someone listening to your page should hardly be aware that a graphic image is there.

Guidelines from SEO Workers.


Meta Data, Microdata, and Sitemaps

Getting a good site ranking is only half the battle - you also need searchers to actually click on YOUR listing over the other options. This blog, Increase Website Click Through Rates, has some great tips on how your web design team can optimize your website for clicks.

H1 Tags and ALT Attributes can be tricky.

Don't let bad code be the downfall of your website. Check your HTML for H1 tags and ALT attributes and make the necessary changes.