Content Structure: How are Website Contents Properly Structured?

Content Structure

You come from a search engine to a website, but there you will not find what you are looking for. The page is confusing, you do not see at first glance what it is about and you also find no way to get to the wanted. We all know about this situation and the frustration that it triggers. Why does it still happen so often and how can we prevent it from happening to our customers? We can better pick up our customers and make them happier by our content structure. By the way, we optimize our content for search engines and can improve our rankings.

Why should Google Understand Our Content?

Google does not want to be a search engine anymore. Much more would you like to be an answering machine? For every conceivable question, a direct answer should be immediately available.

This development can be seen very clearly on the search results pages (SERPs). Already 15% of SERPs contain Featured Snippets and even 40% contain Knowledge Panels. Featured snippets make a single search result particularly prominent with a longer text excerpt and even with an image. Often, lists or tables are also included.

If you do not want to lag behind your competitors in this development, you need to allow Google not only to read your content structure but also to understand it. Because this increases the likelihood that your page will be displayed in the Featured Snippets.

Featured Snippets

When searching for “Teamviewer alternative” Google shows a Featured Snippet with a spreadsheet

The markup for Structuring Content

Markup is a basic way of content structure. An important feature of markup is that it is machine-readable. This makes it ideal for giving Google bot information about our content.

Markup is always a semantic award. That means: It is about the meaning of elements, not about the representation. Design and layout are awarded separately. Markup divides texts, regardless of the appearance of the content.

Since HTML is also a markup language (the M in HTML stands for markup), we can use this method directly on any web page. As a result, there is no additional effort in principle; Websites have to be marked with HTML in any case. The only question is, will we do it right?

The definition of content elements and content structure can even help us in designing our content. A structure already provides many elements that I need for my topic and thus simplifies the construction of web pages.

The advantages of markup are:

  • Clear separation of structure and design
  • No additional effort
  • Supports content conception

Markup Elements


Headings are a fundamental element in all longer texts. Whether a master thesis or novel, headings give the reader a stop and make it possible to find specific parts of the text specifically.

Headings have very similar functions on web pages. They specify the basic structure of the page, enabling page scanning and page navigation.

Scanning is the way in which users scan websites: they search the website for important elements and try in no time to check whether the page contains the information you are looking for. Most of the time the decision to stay on the side – or to jump – is taken after a few seconds. Good headlines help the reader make this decision quickly and safely.

In-page navigation can be done by heading without links. The user just scrolls to the section you are looking for and starts reading the text there. An example would be a page about headaches, which in addition to general information, also contains information on gender-specific headaches. Depending on their own information needs, the reader can jump directly to the paragraph concerning him. For example, you can address different audiences on one page without causing confusion.

Of course, headlines are also an important signal for search engines. They help with the thematic assignment of pages and have until today a positive correlation to rankings.


The “Web Developer Tools” plugin for Firefox can display the headline structure of a web page with one click. Under Information, select “Show document outline”.

H1 Headings

Headings can be structured in HTML in six levels. The H1 heading is at the top level and should reflect the theme of the website. Thus, it provides important signals for the customer, who seems at first glance: “Here I am right!”, But also for search engines, which can well assign the main theme of a page.

This often causes the problem that slogans are very prominently displayed on pages. But they are often unsuitable as a heading. In the example of Honda, it goes on the side around a special model: “VFR 1200 F”. However, the claim is “Technology meets true character” and thus gives no indication of the content of the page. For example, at first glance, my colleagues considered the page to be a category page or even an ad. None of them realized at first glance that this was a product page for a single model.

VFR 1200 F

The landing page for this Honda model mixes claim and headline

In this case, a technical trick was used to work around the problem. The claim “Technology meets true character” was awarded second place (H2). The actual H1 is the gray text “VFR1200F” directly above the claim. Probably the SEO should be made happy because of something meaningful in the headline. I, as an SEO, am not happy because the user interface is not good.

Important Feature of H1 Heading

Another important feature of the H1 heading is the consistency of communication between search results and results pages. The search result (snippet) is a promise to the user. After the click, he expects to find what has been announced in the snippet. If there is a discrepancy here, the customer is confused and jumps off in the worst case. This behavior can be observed extremely well in SEA ads.

Honda VFR1200F wikipedia

Consistency between search results and results pages

What applies in the SEA, is not wrong in SEO: The customer should feel in the first few seconds to have clicked on the correct result and to find on the site all the information you want. Here, a meaningful H1 can support very well.

To Summarize: Good H1 Headings Should

  • Clearly name the topic of the page
  • Ensure consistent communication
  • Guiding the view guide


Another structural element is lists. There are two types of lists in HTML

  • Numbered Lists
    (Ordered List / <ol>)
  • Enumerations
    (Unordered List / <ul>)

In the source text, the lists are very similar. Each consists of an opening and closing tag for the list and list elements inserted between them.

Content structure for Google and readers

When inserting lists in texts, it is important to note that lists are actually generated in the HTML. Specially numbered lists are often simply built by hand from numbers and spaces. All current CMS has extra functions for inserting lists, which then generate correct markup.

What use do lists have in texts? You can follow this text, which you are currently reading. Also, lists allow the scanning of texts. Important information can be summarized. In addition, they create a structure that facilitates the reading of texts. A study by the Nielsen Norman Group has found that texts with lists are 47% more read than unstructured texts.

Especially on product pages, it makes sense to include the product properties once as a descriptive text and once as a scannable list. The customer can see at a glance whether the product meets his needs.

list of popular programming languages Content Structure

Google uses lists, among other things, to generate Featured Snippets from it. In the example, the landing page actually contains a numbered list in the middle of the text. Google shows them very prominently with bullet points. The reference to further elements still encourages you to click.


Emphasis is the salt in the soup of every good text. Especially on websites, you can use it to guide the reader and make reading easier. Highlight the key points of your statement. According to the motto: If not everything is read, the reader should take at least that.

The two most used HTML tags for emphasis are <strong> and <em>. Typically, the strong tag is mainly used and usually shown in bold. According to the specification, it should identify important parts of the text. In addition, the Em tag can be used to highlight particularly stressed text parts (em for emphasis = emphasis). It is often shown in italics.


Under no circumstances exaggerate with these tags, to make the text not difficult to read and pushy !


For images, there are only a few possibilities to structure information in HTML directly. The alt attribute on the image and the filename are crucial here. Otherwise, image information about the context is given.

Picture information:

  • Filename / path
  • Alt attribute
  • Caption

Alt Attribute

The alt attribute has long been the cause of arguments. Most SEOs are required to fill it out. Rarely are requirements made for a reasonable content structure. The meaning of the alt attribute is actually quite clear: it should be an alternative if the image can not be displayed. So a Twitter logo could have the alt text “Share on Twitter” if it does. Just “Twitter Logo” would not be enough in this case. A simple picture of a cute cat can be described as “sweet cat lolling”. Purely design-driven images, such as backgrounds or similar eye-candy, should not contain alt text because they do not convey information or function (except looking beautiful).

File Name

The file name, on the other hand, should simply describe the picture very briefly and crisply. In the above example, this would be eg “twitter.jpg” or “sweet-cat.jpg”. Further information, such as the assignment to a category, can be transmitted via the folder structure: “/animals/cats / sweet-cat.jpg”.


The caption is not defined directly in the HTML. However, Google uses text in the immediate vicinity of images (context) to evaluate the content of images. It’s also often unclear to the reader what he’s seeing, or why. Here a caption can help and link the image with the page content.


The texts on images are enormously important for search engines, as they only rate texts, but not image content. An image with the file name “123.jpg”, without alt text and without a caption is simply worthless to Google. Through keywords in the image information, we can not only rank in the Google images searchContent Structure -Google images search but also increase the importance and thus the rankings of the website.

It is important in every case that the texts are different. Please do not just copy the file name in alt and signature, then you can better omit it. Automatically generated texts are often problematic here, better are real, handwritten texts that simply make sense.

Importance of Content Structure for Ranking

To be able to rate a text, I have to understand it first of all. That’s the Google bot no different. Text comprehension is supported by structural elements. They make it possible to recognize different areas in the text and distinguish important from the unimportant. This also supports, for example, the formation of topic clusters.
All of this already supports our efforts to improve our rankings. But there is also the chance for Featured Snippets. Even if our page only ranks at position 5, it can be displayed in the Featured Snippet at position 0 above all competitors. So practically places in the ranking can be skipped.

Improve Your Texts – Make Google and Its Customers Happy With this simple technique, you can still get a head start today.

Lecture on The Topic

At the IONOS SEO-Days 2017 I gave a lecture on this topic.


The Slideshare for the lecture: Content structure for better user experience and machine readability:


Recorded recording of the lecture “content Structure for better user experience and machine readability”:


Please enter your comment!
Please enter your name here