How to combine SEO and Web Design to create more attractive pages for the persona and search engines – WAU

Several factors make a website incredible. Engaging the user with a pleasant look and navigation is one of the most relevant, but memorable pages matter little if people cannot find them when they search on search engines. That is why anyone who knows how to combine SEO and web design will have a powerful digital asset.

When we invest in the development of a website, we want it to be very presentable, with pleasant visual elements, in addition to offering functional, simple and intuitive navigation.

This is all part of the concern to offer a good user experience, but can we reconcile this approach with SEO techniques?

Although there are several challenges in combining SEO and web design, this is a totally viable combination. This becomes clearer as we understand the importance of creating attractive pages for both people and search engines and better understand the design errors that affect search engine optimization.

Want to know more? Follow us!

Why associate SEO and web design?

There are many arguments in favor of the idea of ​​considering SEO and web design as allies in the creation of an extraordinary website. Check out 5 of the main reasons to keep both in harmony.

Most of the traffic usually comes from organic searches

According to a study by BrightEdge, a company that has a sophisticated SEO platform and other digital marketing solutions, on average, organic search corresponds to 50.1% of website traffic.

This means that, as effective as a strategy focused on paid traffic is, are natural searches that will bring more visitors to the site in the long run. Therefore, we must see SEO as an excellent opportunity to optimize our pages to strengthen the channel with a greater chance of attracting prospects.

If your company has had a website, blog or e-commerce for some time, check it out in your web analytics tool. It is very likely that organic traffic is the largest channel for acquiring visitors.

The appearance of the website reflects the company’s commitment

When we access a page where we notice an oversight with the choice of layout, fonts, colors, images and other visual elements, the impression that remains is that that brand is not committed to providing a good experience to visitors.

Therefore, it is essential to invest in a quality website, with a design consistent with company values and in balance with the persona’s characteristics.

Bad design keeps users away

In addition to damaging the brand’s reputation, a website with a bad look and experience tends to have an immediate consequence on user behavior: it tends to abandon that page.

It is worth remembering that this frustration is not only valid for websites with a project that leaves something to be desired, but also for those who have excess design elements.

Excessive functionality and images with a resolution far above desirable also make navigation difficult and increase the desire to click the back button.

Certain technologies don’t work well with search engines

When Flash was at its height, it allowed you to create websites with effects and animations that Web standards hardly allowed at the time.

The possibilities in terms of design were incredible, however, this technology is not traceable by search engine robots, which makes it difficult (and very) to index websites built like that.

Flash is one of the most notable examples, but it shows very well how the use of a technology that values ​​only the design part can ruin the presence of the brand on search results pages.

Doing SEO during website construction avoids rework

As SEO consists of an optimization, it is common for companies to leave this step for later, when the web design or even the entire website is ready.

It turns out that this requires a series of changes that could be avoided if SEO were part of the process of building the pages.

What principles cannot be missing from this combination?

Now, let’s see what are the fundamentals and essential elements to create an attractive website for both the persona and the search engines.

1. Navigation and site structure

When we go to the supermarket, we find signs with the indications of Fruits and Vegetables, Drinks, Frozen, Hygiene, among others. If we go to the Hygiene section, for example, we will see the products separated by Deodorant, Soap, Toothpaste, Shampoo, and so on.

We can say that a website is organized in a similar way. We divide products or content into categories and subcategories, following a hierarchy. They are available in menus, so that the user can advance according to what they are looking for.

In other words, the ease of reaching the product sought at the supermarket using the departmental signs as a guide corresponds to navigation, while the division of the establishment into sections and subsections – and the choice of their respective names – is equivalent to the structure of the website.

Let’s use the Amazon London website as an example.

seo and web design Amazon

There is a global navigation menu, with options related to shopping (stores), your account, offers of the day. Within the Stores Menu, if we go to Books, we see more subcategories (All Books, Books on Offer, Best Sellers, etc.).

When we click on All Books, we are directed to a specific page, with offers and a local menu, where the user can access the titles by genre, author or publisher.

seo and web design Amazon

Notice how Amazon was careful not to put all possible options in the same menu. Navigation is clearly from a more general to a more specific category.

In addition to helping the user to understand what the site has to offer and allowing them to go where they want, the organization at levels and sub-levels helps search engines to understand the context and the degree of importance between their pages.

Thus, values ​​simplicity, by avoiding the elaboration of fancy menus and grouping their contents or products in an appropriate division of categories and subcategories. If you face difficulties in this process, the information architecture will be of great help.

2. Content layout

It is already known that the quality of the content is one of the most important factors for Google’s algorithm. So, value the information that your site has to transmit.

Keep in mind that, on the web, we compete for the user’s attention, which probably has several other tabs open in addition to your page. In this context, where each visit to your site can be considered a victory, we must focus on the content and not create distractions.

Therefore, always think about helping the reader to find what they want, balancing text, visual elements and blanks, in order to do not leave content in the background.

3. Responsiveness

A responsive design – one that has the ability to adapt to the screen size of the user’s device – is indispensable, especially with the growing use of mobile internet in the world. For you to have an idea, the cell phone is already the main means of internet access in London.

Due to this relevance, Google already considers the compatibility of pages with mobile devices as one of the ranking factors of its search engine.

So, value the freedom of your visitors and always offer a pleasant experience, regardless of whether they prefer to visit your website from the desktop or another gadget.

4. Use of images

The visual appeal of a website is crucial to generate connection between the visitor and the brand. In this sense, images are important allies to improve the appearance and complement the text content present on the page.

It turns out that search engines are not (yet) able to interpret what is in the figures. For this reason, in terms of SEO, you need to be concerned with including a description in the images you decide to add. To do this, simply insert an alternative text, using the alt text attribute.

Unfortunately, this is not the only concern we should have with images. As we will understand below, they are often the source of many errors that hinder SEO.

What web design mistakes affect SEO the most?

After seeing good reasons to combine both elements and understanding the pillars of this combination, let’s see 10 mistakes in web design that can ruin your brand positioning in searches.

1. Forgetting to compress images

Quality images are undoubtedly a significant part of good design. However, if they have a very high resolution, they can affect the speed of loading from the website.

The user will hardly have the patience to wait for a page to open if it takes more than a few seconds, even more if he accesses from a mobile device. Therefore, for Google, the site loading speed is a ranking factor.

Therefore, it is important to pay attention to the size (in terms of dimensions and megabytes) of the figures so that they do not slow down the pages. Always try to use an image compression tool before inserting them on the website.

See the TinyPNG tool. In this example, she was able to compress an image by 75%!

seo e web design tiny png

2. Maintain bad content

As much as the content is not always associated with the design, we must remember that there are aesthetic aspects that can hinder the user’s engagement with it. Very large paragraphs and phrases, very small font and color of the handwriting that makes reading difficult are characteristics that search engines are able to detect.

Notice in the image below how the words are the same.

web design

Just look at how very large blocks of text, whole paragraphs in capital letters and a color without proper contrast make the experience much worse.

3. Include excess JavaScript calls

The Web is full of scripts that help to improve sites with more dynamic elements or incorporating media from other services with the embed function. The problem is that requesting too many external resources can slow loading, which we already know is detrimental to both the user experience and SEO.

With that in mind, use third-party script calls sparingly. Analyze if they really are indispensable, or if it is possible to use other solutions.

See the case of this blog: of the 2.4 megabytes transferred, 654 kilobytes corresponded to JavaScripts. It is about 26% of the transfer data when loading this specific page.

seo and web design java script

4. Being a significant part of the Flash site

It is true that Flash can create incredible effects on your website, but it is worth remembering that the user needs to have Adobe Flash Player installed on the device to be able to view.

In addition, search engines do not index content built with this technology very well.

Thus, the ideal is to avoid using Flash for navigation and text content, or, simply, to opt for other alternatives that follow Web standards.

flash website

5. Ignore users of mobile devices

We have already discussed the significant increase in connections via tablets and smartphones, which indicates that the likelihood that the majority of visitors to your site come from these devices is very high.

If he is not prepared for these gadgets, it is almost certain that the person will abandon the page.

As search engines consider the fact that the site is mobile-friendly or not to define its positioning, it is worth investing in a responsive design also from the point of view of SEO.

mobile friendly sitemobile friendly sitemobile friendly site

6. Replace important elements of HTML with images

Creating impressive images and using them in place of important HTML elements such as heading tags may be very pleasing to the eye, but it is not going to work for SEO.

The H1, H2 and H3 tags highlight the degree of relevance of each part of your content and allow you to place greater emphasis on the keyword from that page.

Using the example of our “SEO Blog” again, we can see in the figure that there is an image with the title of the post, but, even so, the H1 tag with that same title was kept so as not to harm SEO.

Replace important HTML elements with images

7. Insert a lot of text in images

We have already explained that search engines cannot interpret images in the same way that they are able to analyze textual content – which is part of the page’s HTML code.

For this reason, it is a bad practice to have images made up basically of text instead of reproducing these passages with actual textual elements on the page.

Although the alt text attribute can be useful in these cases, the ideal is to create complementary text or keep separate image and text. Another alternative would be to create an overlay layer with text, using CSS features.

See the example of the infographic “How to gain a lot of followers on Instagram: find out with these 27 surefire tips”, here from the WAU Blog. Instead of publishing only the art, a complementary text was elaborated to expand each of the tips.

8. Create overly sophisticated menus

We already know how navigation is relevant for users and searchers. So, nothing better than create simple menus that follow the standard expected of these elements on the Web (a list that is not ordered vertically or horizontally, for example).

Navigation needs to be organized and never create confusion in your persona. So keep your balance. Caprice in the presentation of the menus, but avoid being too innovative.

The Blog da WAU is an excellent example, with the list of Categories in the top menu and with the option for the user to also access the footer.

seo and web design blog categoriesseo and web design blog menu

9. Use features that make it difficult to access content

When the user arrives at your site through a search tool like Google, the idea is that they find what they are looking for, right? If we put pop-ups, notices, ads and other elements in front of the main content, we make that access difficult.

Take the news site in the image below as an example. Note how, when opening the main page, the space dedicated to the information that the reader really wants to see is very small in view of the amount of ads.

site with lots of ads

The search engines are smart enough to detect this type of thing, which is a reason to affect their positioning.

10. Disregard testing and measuring results

The best way to know if web design is negatively influencing SEO is to conduct tests and evaluate the results.

An interesting measure is to include annotations on the analytics platform. Whenever significant changes to the website design go live, record the date and monitor if there has been any considerable change in organic traffic.

seo and web design changes in analytics

It is important to remember that a drop in visitor acquisition via organic search can have other reasons, such as server problems or even changes in Google’s algorithm.

What tools help to see if SEO and web design are properly aligned?

Now check out some tools that every web designer who wants to improve their sites also from the perspective of SEO should know.

Screaming Frog

Screaming Frog is used to crawl a website, almost like search engine robots would. Once installed on your computer, just enter the URL and click on Start to begin the process called crawling, in English.

After the procedure, we can see information such as:

  • page response time;
  • number of resources (HTML, JavaScript, CSS, images, Flash, PDF and others) loaded internally and externally;
  • heading tags;
  • title tag;