SEO webdesign: Steps and examples for an optimized website

Minutes well spent

SEO web design-KOMMA99

Table of contents

Web design needs SEO and vice versa - How easy it is to achieve more visibility and traffic

A website can be designed no matter how elaborate and appealing - without a SEO strategy (search engine optimization) behind it, however, it is very unlikely to be seen. On the other hand, a website can also follow a sophisticated SEO strategy, but if the web design and usability are not right, the visitor will quickly leave the page again and not perceive the content. 

In this blog post we show you, as an online marketing agency, how you can skillfully combine web design and SEO (search engine optimization) - For more visibility and usability.


What is SEO web design?

When talking about SEO (search engine optimization) web design, it means a graphically appealing web design of the website that incorporates SEO relevant factors. This means that the graphic elements in the web design of the website are combined with SEO criteria, that is, criteria that enable a good ranking in search engines such as Google. 

Web design and SEO are very different fields, but both pursue the same goal: Meet user expectations, deliver all the information in the form of content and help the website and the company gain visibility. Roughly summarized: The goal is to increase the user-friendliness or usability of the website.


The ease of use in the first place

For a company it is of great value to have a website with responsive web design and search engine optimization (SEO) to gain visibility in search engines. The company wants to be found and reveal content so that visitors to the website become customers. Often, a company expects a web designer to create a particularly pompous, exciting site that will be remembered. The part of "being found" through search engine optimization is often forgotten. And even if the website is found - One wishes as an owner that the visitor spends longer time on it, perceives the contents and it in the best case to a ConversionThe Group is not involved in any transactions with third parties, i.e., purchases or the use of services. 

So usability includes not only a beautifully designed website with professional web design, but also the loading time, the navigation on the website, an appealing header and footer area, and much more. With usability in mind, the following 5 golden steps await you to give you an overview of optimized SEO web design and thus pave your way to a website that is visually appealing and also found. 


5 steps on the way to an optimized website

Step #1 - The SERP Snippet 

Let's start at the beginning of our visitor's journey - It all starts with a keyword, which is a phrase that the user enters into the search engine to get to a website in the first place. The search results page on Google displays various search results - each search result is displayed as a  SERP Snippet shown.  A SERP snippet is a short overview of what users can expect after clicking on the search result:

SEO web design_comma99_9

At SERP Snippet you will find the URL at the top, below it the title and finally the meta description of the pages. Already here, consciously or unconsciously, it is decided which website is most appealing to the user. If the title or meta description is too long, it is abbreviated with a "...". Title and Meta-Description should keep the length, which is given by search engines (like Google) to be displayed completely. For this purpose you can use our In-house SERP snippet generator with the help of which you can create and optimize the SERP snippet - not only related to the keyword focus, but also to the length.

Additionally, it makes sense to keep the title and meta description short and concise. With icons and meaningful words you stand out from the gray mass of the other SERP snippets in the design and thus make your website more attractive for the searcher on Google. In summary, the following rules apply from the search engine's point of view:

  • The title should be no more than 70 characters or 500 pixels.
  • The meta description should not exceed 170 characters.
  • The title tag of the website URLs should be different.
  • Icons and meaningful keywords are more likely to encourage users to visit the website.

However, optimizing the title and meta description has another advantage -. The more often users click on your URL, the higher is your CTR (Click through Rate) and the more likely you are to be found at the top of search engines, like Google, not just because of your content and design. 

In our online marketing agency KOMMA99 we build websites exclusively with WordPress. Here, as an online marketing agency, we create a wonderful web design, content and use the scuhmachine optimization (SEO). A very good plugin for the WordPress interface and the online optimization of title and meta description is included Yoast SEO - The plugin makes optimization quite simple and has a very user-friendly design.  


Step #2 - The Header, Above the Fold & Footer

We did it, and convinced the users to visit our website and web design and review the content with our Title and Meta Description. The first thing that the visitor sees on our website is the header and above the fold area that we create in the web design. 

SEO web design_comma99_6

In the header, in our example the narrow white strip at the very top, the logo is on the left and the menu is on the right or in the center by default. This structure is implemented on almost all websites with a good design or web design, which means that visitors (users) are already accustomed to it, making navigation easier. 

Below the header is the Above the Fold area - Just like for the title and meta description, the following applies here: Short, crisp and appealing. From a design point of view, the area should be inviting and well laid out, for the user the following questions should be clarified here right away:

  • Can I find what I am looking for on this page?
  • What are my advantages?
  • What is the next step?

Ideally, the visitor then scrolls further, navigates in the clear menu to another service page, or immediately contacts you. No matter how the visitor continues - he should be convinced by the website, and not navigate back to the search results page, so that you can achieve a good ranking. In the Above the Fold area, you can work with keywords and also include a CTA (Call to Action) button for optimization from an SEO perspective.

In the footer, on the other hand, i.e. the area that is found at the very bottom, all contact data and information about the company should be findable for the user by default. 

SEO web design_comma99_5

The header and footer are the same for each service page, in order to create a certain consistency throughout the website and not to confuse the user - from the design aspect, they form the framework of the website. 


Step #3 - The structure of the site

Web design, as mentioned several times, is not only about the aesthetics, but also about structure. And on a website there are a lot of different structures that should be taken into account so that the website also ranks on the search engine. 

It's important to follow a structure because the visitor is most likely landing on your website for the first time - a new environment in which they need to find their way around. If the visitor doesn't find his way around, he will quickly leave the site and won't notice your content and design - but we want to achieve the opposite. The motto is therefore: the more logically and clearly the page is structured, the better the search engine optimization will succeed. It is possible to distinguish different structures on the website, each of which follows different rules:

Menu structure

The menu structure describes the structure of the various service pages of the website among themselves. To explain the menu structure more clearly, we will again use our example.

SEO web design_comma99_4

One rule in particular applies here: each page should be reached with a maximum of 3 clicks (click depth 3). A higher click depth makes the website confusing and confusing, so that the visitor does not find his way back, whereby the search engine optimization automatically suffers. Another advantage: search engines rank pages with a low click depth higher, because search engines can then also crawl through the page more easily - a win-win situation. 

The principle also applies to online stores and is also feasible if you take a closer look at websites like Amazon. The optimal click depth is solely a matter of planning and structure in the design. 

Table of contents

A table of contents is not relevant on every subpage, but it is absolutely necessary, especially for long texts, such as blog articles. Visitors are often put off by long texts (content). For SEO onpage optimization, these are often necessary, but can also overwhelm if they are not well structured and clearly laid out. 

SEO web design_comma99_3

Using the example of our online marketing agency's website - one of our Blog article about the Customer Journey - you can see what to expect at a glance in the table of contents. The table of contents is additionally clickable, which makes navigation on the subpage even easier. 

Heading structure

Closely related to the table of contents is the heading structure. It is not only relevant for the search engine to find the Hierarchy of the text it also helps the reader to maintain an overview and to find the common thread through the text. 

Using our table of contents as an example, the H tags online (headings, H for headlines) would look like this in the technical realm of SEO: 

[H1] Customer Journey

[H2] How to control the customer journey and generate new customers

[H3] How is the customer journey actually defined?

[H3] Models of the Customer Journey

[H4] The AIDA Modell

[H4] The 5 phases of the Customer Journey


When writing SEO texts, this H-tag structure also plays a major role with regard to keywords and hierarchy. You can find more about this in the blogarticle our online marketing agency about keywords. Don't want to create your own content? Then take contact with us - as an online marketing agency, we'll be happy to write your texts!


Step #4 - The usability & mobile view

So our website is now well structured, provides the visitor with a common thread through the website and is aesthetically designed. However, one extremely important point for web design and SEO is still missing, which is every day more a relevant criterion for ranking - the mobile view. 

Users are increasingly accessing a website by cell phone, whether on the move or even at home - mobile search is simple and straightforward. Search engines like Google also notice this and rank websites higher whose mobile view is optimized. According to the latest algorithm updates, websites without mobile view should not even be found on Google anymore. But this gives us no reason to worry, because we create the mobile view automatically with WordPress and plugins like Elementor and these only need to be adjusted so that everything remains clickable and continues to work. 

SEO web design_comma99_2

It's important to remember that scrolling and clicking is different on a cell phone than on a desktop or tablet - just as we flip through a paperback book differently than an encyclopedia. User-friendliness & usability are the buzzwords - then it's simply a matter of testing out the mobile view for yourself. 


Step #5 - The technical factors

In the previous blog post we went through all the points that the visitor can actively see and click. Thereby topics from the SEO area were represented as well as from the web design area. The technical factors are exactly the point that distinguishes the web design from SEO, but at the same time also brings together. You should definitely consider the following points when technically optimizing your site for a higher user experience:

Loading time

The loading time of your website can minimize your conversions - It's really only a matter of seconds. If a website takes longer than 5 seconds to load, the visitor may bounce and navigate back to the search results page. If a visitor bounces quickly from the page, the search engine recognizes this and evaluates it as a negative ranking factor. So a fast load time is often the key to keeping the visitor right away. 

To positively influence the loading time of the website, WordPress plugins like WP-Rocket are a good choice. It improves the performance of the website sustainably and is easy to adjust. At the same time, you can improve the loading time of your website with tools like "Google Pagespeed Insights" or GTmetrix check regularly. Even large images or elaborate effects can play a role in loading time and minimize your conversions in the long run. 

SEO web design_comma99_1



The robots.txt file is a text file that is stored in the root directory of the domain - it is particularly important to protect your website from unnecessary search engine crawlers. This means you put it where the crawler has no business - an example is the login screen. 

The main reason to set non-indexable pages in robots.txt is to use the crawling budget wisely, and not let search engines crawl areas of your site that are unnecessary for ranking, or even worsen it by crawling. Important companion for installing the robots.txt and crawlspaces is the Google Search Console.

HTTPS and SSL certificate

An HTTPS or SSL certificate means that your website is secure - that makes your website more attractive for visitors. But also Google values the certificates, because with HTTPS and SSL you rank better than without. 


The sitemap of your website is not visible for the visitor - for search engines, like Google, it is. It is defined as a map of your website - There, search engines are shown which pages are available and can be crawled and listed by the crawlers . Based on the entries in your sitemap, the crawler bot quickly recognizes which pages are new or updated and restricts its crawling activities to those only. 

You can also view the sitemap in the Google Search Console record to always keep an eye on it.

Structured data

Structured data can also not be seen by the visitor, but play a crucial role for Google. This information and content is marked for search engines - The classification of the data and the categorization of the subpages works faster and easier for the search engine. 

If you provide structured data to the search engines, you will have an advantage in the SERPs - Rich Snippets will enhance your SERP and your CTR will increase. 


The technical aspects can be quite overwhelming for us laymen - as an online marketing agency we are happy to help you - just take contact on.


Conclusion - The combination of SEO and web design brings you to the goal

SEO and web design are two different areas, but belong together. The fact is that if you want to run a successful website, you need both - SEO and web design. Starting with the SERPs, through the Information architecture From the design of the website to the technical factors in the backend, many things should be considered for a good ranking and a high conversion rate - small optimizations usually make a huge difference and visibly increase the ranking. 

We hope we could help you with this blog article and explain the connection between SEO and web design in an understandable way!

If you have any questions about online marketing, just get in touch!

Logo round COMMA99
SEO - Search Engine Optimization