SEO webdesign: Steps and examples for an optimized website

Table of contents

SEO-Webdesign_Komma99_6

Webdesign 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 - For more visibility and usability.

 

What is SEO web design?

When we talk about SEO web design, we mean 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. 

Web design and SEO are very different fields, but both pursue the same goal: Meet the expectations of users (users) , provide all the information in the form of content and help the website and the company to gain more visibility. Roughly summarized: Increase the user-friendliness or also 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 to gain visibility in search engines. The company wants to be found and reveal information 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" is often forgotten. And even if the website is found - as the owner you wish that the visitor spends longer time on it, notices the content and in the best case it becomes a ConversionThe Group's business activities are conducted on an arm's length basis, i.e., through a purchase or the use of a service. 

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 but 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-Webdesign_Komma99_9

In the SERP snippet you will find the URL at the top, below it the title and last 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 in terms of keyword focus, but also in terms of length.

Additionally, it makes sense to create a short and concise title and meta description. 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 one more advantage - The more often users click on your URL, the higher 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. A very good plugin for the WordPress interface and the online optimization of Title and Meta-Description is 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 user to visit our website and examine 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-Webdesign_Komma99_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, so 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 point of view.

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

SEO-Webdesign_Komma99_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 website

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 can't find his way around, he will quickly leave the site and not 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

Die Menüstruktur beschreibt die Struktur der verschiedensten Leistungsseiten der Webseite untereinander. Um die Menüstruktur anschaulicher zu erklären, halten wir uns hier wieder an unser Beispiel.

SEO-Webdesign_Komma99_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-Webdesign_Komma99_3

Using the example of our online marketing agency's website - one of our Blog article about the Customer Journey - you can see at a glance what to expect from 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] Wie wird die Customer-Journey eigentlich definiert?

[H3] Models of the Customer Journey

[H4] The AIDA Modell

[H4] The 5 phases of the Customer Journey

etc. 

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. 

 

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 the 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 this only needs to be adjusted so that everything remains clickable and continues to work. 

SEO-Webdesign_Komma99_2

Keep in mind that scrolling and clicking will be 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 web design from SEO, but at the same time brings them 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 load 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-Webdesign_Komma99_1

 

robots.txt

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. That means you put it where the crawler has no business - An example would be the login mask. 

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

A HTTPS or SSL certificate means 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. 

Sitemap

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. 

 

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

SEO and web design are two different areas, but belong together. Fact is: If you want to run a successful website you need both - SEO and web design. Von den SERPs angefangen, über die Information architecture der Website, bis zu den technischen Faktoren im Backend sollte, für ein gutes Ranking und eine hohe Conversion Rate, vieles beachtet werden – Kleine Optimierungen machen meist schon einen riesen Unterschied und erhöhen das Ranking sichtbar. 

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

Written by
Nina Kaiser
Nina Kaiser
Head of Graphics & Marketing - Learn more about Nina