Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Creating search engine–friendly content

Creating search engine–friendly content

Semantic markup is a key element in creating search engine–friendly content. You can see it as a natural way to add meaning to web content so that it can be understood by people, programs, and devices.

(X)HTML includes a variety of meaningful tags, such as the following:

  • title and meta
  • h1 to h6, p
  • ul, ol, and dl
  • strong and em
  • p and cite
  • abbr, acronym and code
  • fieldset, legend and label
  • caption, thead, tbody and tfoot

For example, a search engine can recognize a headline because it is wrapped in an h1 tag. So try to use the h1 element for your main header and use the h2 to h6 elements for subheaders. Textual content can best be placed in paragraph tags:

<h1>Welcome to the official UFO website</h1>
<h2>UFO merchandise</h2>
<p>Make me rich, buy my stuff...</p>

A navigation bar or main menu is a list of items, so it can best be defined as an unordered list, using the ul element. Navigation items are links that are embedded in list items:

<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#merchandise">Merchandise</a></li>

Besides using tags, try to keep a close eye on the available attributes. Always use descriptive values for alt and title attributes:

<img src="img/merchandise.jpg" 
alt="t-shirt and mug with the text:
I abducted UFO and lived to tell" />

You can learn more about the meaning of HTML elements and their attributes at W3 Schools.

Be aware that the semantics of HTML are very limited. As a result, every automated tool or search engine will interpret a website in its own unique way. To give you some indication of how semantic your website’s HTML is, use the W3C’s Semantic Data Extractor service. If the semantics of HTML leave you unsatisfied, you could explore the option of including additional semantics by using microformats.

Search engine optimization is a specialization in itself. Semantic markup is a good foundation for search engine optimization. However, the combination of using this foundation and many additional variables eventually determines how well a website rates.