RankActive Blog

What Design Mistakes Can Hurt SEO? [Updated]

19 August 2019 rankactive 2 Comments ALL-HANDS SEO, CONTENT MARKETING, ON-PAGE SEO, TECHNICAL SEO


So, you have decided to create a website. It is only natural that you ask yourself: “Should I pay more attention to attractive design or focus on search engine optimization?”

1. Missing H1 tags

Although this topic is not very popular among web developers, we can assure you that it is not the rocket science.

H1 stands for Heading one. In plain language, this is the main heading of the page. Every web page is structured with the hierarchy that helps search engines to gather correct information and hereafter rank users accordingly.

If we look at a website as it was a book, H1 would not be its title. It tells potential readers whether the book’s content is relevant to their interests. For example, if you are looking for tips on how to cook lasagna and you come across the page entitled “How to cook delicious lasagna for your family dinner,” you will apparently read the article. On the other hand, if you see the title, “Why lasagna didn’t win the Oscar,” such page would almost surely go unheeded because it certainly won’t help you with your family night.

In most cases it is seldom easy or straightforward to find Header 1. It is usually the largest text on the page. However, we would like to assist you with finding H1 at any website.

To begin with, open any web page and follow our instructions.

Firstly, open the web page.

Example of page

Next, view the source code.
To do this, use a shortcut for Chrome (PC): CTRL + U
If you are using MAC, go for: CMD + Option + U

Page’s source code

Then press CTRL+F to locate the H1 tag.

H1 tags on the web page

In this example, H1 tag is: <h1> Backlinks anchor: to be or not to be </h1>
After all these manipulations you will probably ask:
Why are H1 tags so important?

The answer is simple: Header 1 is one of the first elements to be overlooked by crawlers, and it helps search engines to determine the subject of the page’s content. H1 tag with a decent keyword can significantly improve your positions in search results.
Here is an example of the website that has a clear H1 tag:
<h1> Jaguar Parts, Land Rover Parts AND MINI Cooper Parts Specialist”</h1>

Example of the website with a clear H1 tag

In this case, header one helps Motorcars Ltd rank in the top ten positions for many keywords related to its header “Jaguar Parts, Land Rover Parts AND MINI Cooper Parts Specialists.”

Keywords analysis through my.super-agency.org tool

If you wish to explain to web designer how the website will benefit from H1 tag, you should introduce them to research on Rebooting Ranking Factors by Searchmetrics.
According to it, 85% of the first-page search results in Google use an H1.

Statistics on H1 usage by Searchmetrics

So, now you see why you need to use Header 1 at your website. But how to use it properly?

Here are some tips on how to create decent H1 tags:

  • Use only one Header 1 tag per page
  • Header 1 tag should reflect the page’s content
  • Header 1 tag should be big, strong and noticeable

Following these tips, you would hopefully increase the ranking of your website and make it good-looking and SEO friendly.

2. Images are a way too large

We have no doubt that pretty imagery makes your website look great. Nonetheless, you should understand that large images and media files may negatively affect the loading speed of your website. As a consequence, your rankings are getting worse, and sales go downhill.

Here is a typical result of imagery abuse:

Example of imagery abuse: www.arngren.net

Horrible, isn’t it?
Let’s have a look at its mobile version:

Example of imagery abuse in mobile version: www.arngren.net

Probably, users are not having a nice time surfing this website.
Following up on the survey by searchmetrics, websites ranked in TOP-10 do not have more than 2 images per page.

Statistics on the number of images by Searchmetrics

Moreover, it should be pointed out that Google rewards pages that load quickly.
To check your website for large content that affects the site speed you can use free Google PageSpeed Insights Test that will tell you exactly what images are too large on the page.

Google PageSpeed Insights Test of www.arngren.net

The test shows that the page can be optimized by reducing the size of images by 59%.
In addition to that, you can download optimized images directly from the Google PageSpeed Insights.

Download optimized images from Google PageSpeed Insights

After downloading optimized content, you can re-upload them to your website and provide your users with the top-notch experience.

3. Interstitials

This year Google warned website owners that “pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high.”

Google claims to be concerned about user experience, especially on mobile devices. It is obvious that interstitials, pop-ups or whatever they are called prevent your website from exploring until you click on the particular link. So it is no surprise that Google finds them disruptive.

Here are three examples of interstitials that, according to Google, make content less accessible:

Examples of interstitials that make content less accessible

At the same time, if you follow the good pop-up strategy, your website would not be affected. For instance, Google recommends to use only those interstitials that appear to a response of cookie usage, age verification or occupy a reasonable amount of screen space.

4. Text in images

Surprisingly, this mistake is quite common among the websites. A lot of designers do not pay much attention to it, though. In fact, it may also have a negative impact on your rankings.
To begin with, search engines do not see the images as we do. Against this background, you should understand that search engines are not always able to recognize text on the image. Indeed, including text into an image instead of adding a text layer over an image, is the equivalent of not including text at all.

In addition to that, images are not vectors, so when zooming the text will become distorted. This wouldn’t happen if it was actual text. Moreover, text on the image cannot be translated with page translator services (such as Google translate), what can make the internalization of the website a way harder.

Here are some tips on how to mix text with images properly:

  • Provide alt text for images. Simply assign images with alt attributes in HTML in order to provide search engines with a text description of your media content.
  • Choose images that show a full sentence. A Subject of the image should be crystal clear, so it will not be difficult for users to understand the action being taken in the image.
  • Do not provide important business information on the image. Placing your business contact details inside images on your footer is not a good idea since your potential customers will not be able to copy and paste this important info.
  • Use special tools to find out how search engines view your website. For this purpose, you can use resources like Site Auditor from Rankactive. Moreover, by using such tools, you can easily locate all links and headings.
Site Auditor from SuperAgency

5. Infinite scroll

According to Google, infinite scroll remains trending as an interaction behavior on pages.

Infinite Scroll at Google Trends

Social media websites with big amounts of user-generated content use it in order to provide their users with the most efficient way to surf that tsunami of information without having to wait for pages to preload.

For example, Twitter has implemented infinite scrolling successfully. From a user’s perspective, all tweets in the feed are equally relevant, so the user is likely to scroll down to the bottom. Since Twitter is a real-time platform, it’s feed updates instantly even if the user leaves it unattended.

Despite that, the infinite scroll does not suit every website on the Internet. For example, you have a blog with 300 pages, and you have decided to enable infinite scroll on it. Obviously, you do not want to show all pages at once. So you set some 10-20 pages to be displayed by default. And these default pages are the only ones that search engine robots are able to see. The reason for that is that crawlers parse websites through links so in this case, infinite scroll makes it impossible for them to discover that there is more content on the page beyond these 10-20 top articles.

If you still want to use infinite scroll at your website but do not want to compromise between design and SEO, we suggest you follow instructions Google Webmaster Blog provides.

All in all, infinite scrolling can be an innovative approach with a great impact on the interface. If visitors of your website are goal oriented, meaning they need to find specific information quickly, this feature is probably a thing that you are looking for.

6. Poor content

Apparently, pages containing information about your services and products are of the greatest importance for your website. Your success is prompted by your target keywords and rankings.

  • The most common mistake related to poor content is the absence of product or service pages on the website. By doing so, you limit your ability to get organic rankings for your target keywords.
The absence of product pages. Example: www.qanuk.ca/commercial
  • The second mistake a lot of website designers make is listing all company’s products and services on one page. This can cause issues in ranking pages by search engines since they rank each page accordingly to its content.
One page for all products. Example: emercoin.com

7. Horrible 404 page

Nobody wants to lose your potential customers who might have visited a broken link on your website or just typed a wrong URL. Broken link without proper navigation can negatively affect the user experience. This, in turn, can lead to a loss of search rankings. In order to avoid it, use our tips on how to create an appropriate 404 page:

  • Include a link to your home page
Example: hootsuite.com
  • Be creative

This is an example of boring 404 page:

Example of boring 404 page

It does not need to be this way, does it?

  • Include a search engine that visitors can use to find the necessary information
Example of including a search engine in 404 page: www.rankactive.com
  • Use an email link so visitors can report problems

While this approach is not very popular, it can be useful in building an e-mail list. As an example, one may take a template created by the team of W3 Layouts:

Including the email list in 404 page by W3 Layouts

8. Using too much Flash

No doubts, Flash is visually good-looking and makes your website visually attractive. At the same time, it is not search engine friendly.

For instance, here is a typical flash-based website:

Example of the flash-based website: www.tombonnerphotography.com

At least that is how we see it. But if we use Site Auditor from Rankactive to simulate the way the search engine sees it, we are not going to get any info. Why? Because crawlers do not “see” flash-based components. As a consequence, search engines will not index your content.

In addition to that, Flash does not work on many mobile devices. So, if you still want to use flash on your website, you should consider creating the dedicated mobile version besides the Flash-based desktop website.

Moreover, even if Flash loads, it tends to load slowly. If we run Google PageSpeed Insights Test on the Flash-based website, it is highly unlikely to end up optimized:

Google PageSpeed Insights for Flash-based www.aderra.net

For all these reasons, it becomes apparent that using Flash for websites is not a good idea. If your website has Flash-based content, we strongly recommend you to switch to alternatives like HTML5 for embedding videos on your website.

Web Design Mistakes that Ruin SEO in 2019

The main element of all recent Google updates is high-quality content. If users are not happy, Google is on their side: your website can lose rankings if you don’t care much about the user experience.

But we’re here today not only for the sake of text content – we’re focusing more on the visual part of the process. Web designers create journeys and experiences, but is it always good for SEO?

9. Non-Responsive Design

Is it even worth investing in responsive websites? Nowadays, the answer is “yes” for any niche. When creating a mobile-friendly design, everything is taken into account: fonts, the buttons’ size, how text and images are placed on the screen, and so on.

In spring 2018, Google announced mobile-first indexing. This means that now mobile versions play the leading role in rankings and indexing. Google states that most of the users surf the web via smartphones, and the search engine wants to meet mobile users’ expectations.

In 2016, 2017, and 2018 Internet traffic was on the mobile side. This is a real game-changer for numerous business owners. Mobile-responsive websites are a necessity in 2019, even if you have top-notch content.

mobile vs desktop traffic

When the designs are ready, and developers implemented the changes, you can use RankActive’s Lighthouse. It provides the detailed metrics of Google’s Mobile-Friendly Test with one click – you’ll find it in the Site Auditor:

Lighthouse RankActive

10. Navigation Flaws

How crucial is website navigation? Let’s see. A potential buyer is clicking on the website but can’t finish a purchase because it’s unclear what step to do next. The result is high bounce rates, less time spent on the page, and, finally, a decreasing conversion rate.

We have to mention mobile design once again: when you think through the navigation aspect, all of the devices should be considered. What’s obvious for a desktop user, may be hard to find for a mobile visitor.

The vital points of the website navigation:

  • A limited number of links in the menu. If you have lots of pages, it’s better to put them into subsections. Our short memory keeps up to 7 items, so this is the best number for menu links.
  • A search bar on the top of the page. It is especially important if you deal with an eCommerce website or a blog.
  • Traditional header and footer placements. Don’t do any experiments in this area. For example, web users intuitively look for the essential information on the top of the page, so you should not add it anywhere else.
website navigation Amazon

11. Too Small Buttons and Links

Clicking on a link isn’t difficult at all, but what about tapping? It’s an entirely different action. Our fingers are not as precise as the mouse pointer, but sometimes, designers neglect this fact completely.

Even if a website has perfect navigation, the small size of a button ruins the whole user journey. It’s like walking in the shoes that don’t fit you. Imagine how high bounce rates can become thanks to this small detail.

To be sure the buttons are of the right size, you should check the Material Design guidelines. These rules are based on simplicity and will help you create a clear mobile interface.

12. Missing CTA

Every website has a product to offer, be it books, clothes, services, or information. But how easy can visitors get to the final goal – a purchase?

CTA example KlientBoost

CTA buttons contribute to your conversions, so neglecting them doesn’t only hurt your SEO efforts, it can potentially damage your business. These are the best practices of highly-converting CTAs:

  • Use first-person phrases: instead of “Start your free trial” make it personal and replace it with “Start my free trial”.
  • Consider the niche before placing a button: if it’s a well-known product or service (cleaning, for example), a CTA will work well above the fold. But if you have an innovative startup, you should tell some facts about it and only then offer visitors their free trial.
  • Add actionable words: “do it”, “buy it”, “try it”. These verbs give users a hint on the goal your website can help them achieve.
  • Leave some free space for a CTA: do not clutter an interface with more buttons or images. You can use contrast colors to show where the button is, i.e., the final user goal.

13. Inappropriate Fonts

Remember one important thing: not all fonts are suitable for your copy. In fact, some of them are created solely for headlines, and some look well in the text.

Headlines have a bigger size than the body text, so here you can use a “display” font. These are a few examples from the Font Squirrel website:

display fonts Fontsquirrel

For the rest of the page, fonts should be as simple as possible. You can look for some inspo at Google Fonts. Even though these examples have no extravagance, they still have different styles:

Google Fonts

If you notice that your article is published with a display font, imagine how “pleased” users will be with such reading. And one more crucial thing: don’t use more than three fonts on the page – this way, you keep the page’s style clean and professional.

And lastly, the three fonts you’re using should be from one family. A font family is a number of fonts that have similar design characteristics. They may have a different size or weight but the essential design is still the same. The Arial font family looks like this:

Arial font family

14. Adding More Images and Less Text

How do you communicate with first-time visitors on your website? By providing enough information about your business. It seems like a simple fact, but still, many entrepreneurs are falling into the trap of adding more beautiful images than vital info.

No doubt, such industries as travel or photography require high-quality visuals, but any website has a limited “image” space. At some point, your site may start loading too slow because of the visual overdose. The result is high bounce rates.

Google’s Webmaster Central Blog published this information in 2010 (almost 10 years ago!):

“…studies by Akamai claim 2 seconds as the threshold for ecommerce site “acceptability.” Just as an FYI, at Google we aim for under a half-second”.

Slowly-loading websites should be a thing of the past. The loading time is one of the ranking factors which you can quickly check using the PageSpeed Insights tool.

A recipe for success is to balance text and visual data on the page. Depending on the branch, searchers should easily find the most important information: product descriptions, prices, contact information, etc. Only after finding a place for it, you can add vivid images of a reasonable size.

15. Auto-Playing Video or Audio Content

You’re clicking on the link, and then – boom! – someone is talking, or some music is playing out of nowhere. The next thing you remember is getting back to Google search – it happens when designers or content managers add video or audio files with the autoplay feature.

Some business owners believe it makes websites more “exciting” and interactive. But remember what we told you about Flash elements: too much doesn’t mean too good.

video on the website

In most cases, people don’t expect something to make sounds on the page, especially without their permission. What if a user is sitting in the library? Or at work? Such awkward situations won’t leave visitors a chance to complete a purchase.

But sometimes, videos are the best way to demonstrate the product’s functionality, so what’s the solution? You can leave the video but put it on mute, and visitors can turn the sound on if they want to.

To make things even better, you can add captions to the video. This way, visitors will understand the content in full even if they are at work and don’t have headphones on. This will probably help you increase the time on page rate.

The most obvious example of the videos-captions mix is Facebook feed:

video content example Facebook

Conclusions

It is very important to focus equally on search engine optimization and website design. It does not matter if you are working on the new website or making a relaunch of the existing one, you should aim to maintain and improve your search traffic and rankings.

Tags:

Like this article? There’s more where that came from.