6 Design Errors That Will Damage Your SEO

6 Design Errors That Will Damage Your SEO

Good Website Design for SEO and Google Algorithm

So your website’s design is the most crucial aspect to help you close more sales. A research study titled Trust and Mistrust of Online Health Sites found that 94% of user comments are directly related to website design elements like website intros, layouts, etc.

Hence there’s no point in designing a website that isn’t appearing in search results to serve your consumers.

You need to think from a different artistic perspective.

Website design and marketing for your business don’t work in isolation. So view the constraints as a challenge and balance elegance with search engine requirements.

In this context, I am reminded of what Prof. Jef L. Richards said:

image53

Yes, Google is getting smarter everyday. But you still need to feed its bot by following the webmaster guidelines to ensure a great user experience for your visitors. Else don’t expect any free traffic from the search giant.

With respect to design, there are a few common mistakes that hamper your website’s search performance. Whether you’re designing a new website or redesigning a pre-existing one (with good search rankings), you can’t afford to commit these.

The value you’re providing on your website needs to reach your audience. Because it’s your duty to serve them. Avoiding these 6 design mistakes will ensure that your website doesn’t get lost in search rankings and your work reaches your customers.

Let’s begin with the first mistake.

1. Including important information in images and not optimising on-page elements

Let me just get it straight to you.

Text is still the most easily comprehended content by search engines – Content is King

Yes serving podcasts, images and videos to your audience might make them happier and help you receive better engagement.

But search engine spiders also crawl media content by looking for keywords in prominent locations.

When it comes to your website’s most important content, remember that these elements are ignored by search engines – images, flash files and java applets.

image10

You don’t need to just take my word for it.

Here’s an excerpt from Google’s official webmaster guidelines.

Try to use text instead of images to display important names, content, or links. The Google crawler doesn’t recognize text contained in images. If you must use images for textual content, consider using the ALT attribute to include a few words of descriptive text.

If you’ll replace your text headers with images, your content might look amazing. But for search engines it’s a useful on-page element that helps them understand the meaty keywords from your content. It accounts for a 15% chunk of Google’s Ranking Algorithm.

image17

So your SEO title (50-60 characters), meta description (150-160 characters) and keyword density remain important elements for your webpages.

Here is an example page that’s properly optimized for the keyword “running shoes.”

image12

A compelling meta description and SEO title will also help you in gaining better CTR in search results.

image00

Once you’ve completed these on-page elements, next come visuals. Image optimization is more important than you think. As per Roman Bebenista, a website well-optimized for graphics can see anywhere between 20 to 60% of all traffic from Google.

Convinced that you need to spend time for optimizing visuals?

Then here are 4 tips on image optimization.

1. Use the alternative image tag to describe your visual elements accurately. This helps search engines in understanding what’s inside the image.image24

2. Google recommends that every page in your site hierarchy be accessible from at least one static text link.

So preferably stay away from using image based menu items. Not just because Google can’t read text inside images. But because it limits the accessibility to your users on mobile devices.

Stick with text-based navigation links to ensure your search crawlers don’t miss them.

Look how Swansonvitamins.com lists all its important website pages in its footer. Search engines cannot miss indexing these pages now.

image25

You can also group all your high value links into categories. It’ll make your footer easily understandable and usable.

Look how Apple groups its important website pages.

image08

3. Don’t give important business information like your business contact details and addresses inside images in your website’s header/footer.

Rather share it directly using text like Jarad Johnson did below.

image72

4. Ideally Google expects you to avoid generic image names like IMG0001.JPG. So use descriptive names like my-new-marketing-post.JPG.

A study at Moz found that the Google Image bot looks at factors other than the alt image tag and filename. Like your title tag, meta description, heading tags, links and anchor text. And you should also host all your images.

image58

 

Similar to images, Google expects you to provide relevant mark-up information (with schema.org) even for your videos.

image34

While we’re on visual optimization, I would also recommend you not to configure your video pages with complex JavaScript, Flash, and hash tags. They would not surface correctly in video search as Google can’t provide unique URL to the users.

image66

Ideally, your goal should be to include text on all the pages of your website.

Tool to find out how search engines see your website

When in doubt regarding how search engines view your website, you can use SEO-Browser.com.

It gives a clear picture of what elements of your website are visible/indexable and which ones get hidden.

2. Not caring about your mobile visitors – Mobilegeddon

Are you still hung up on whether your website should be responsive?

Then you need to read the following statistics.

  • 78% of local mobile searches lead to offline sales.
  • Consumers spend 69% of their time on mobile.

Google has even rolled out an algorithmic update in March, 2015 to demote websites that aren’t mobile friendly. And mobile-friendly websites saw an average of 12% increase in visibility on Google mobile.

image30

And as per data from Smart Insights, non-friendly mobile pages have dropped an average of 5 places in search results.

So do you need to build dedicated mobile websites?

Although responsive website design isn’t an official ranking factor, it is Google’s recommendation to webmasters for making their websites mobile-friendly.

The reason is that Google doesn’t have to index separate URLs (when you implement a dedicated mobile website). And the same HTML is served to all devices (unlike dynamic servers).

image41

A responsive design will offer a consistent user experience to your visitors across devices. Just the display is rendered differently based on a user’s device.

The benefits of responsive design also include increase in your website engagement and lowering of your bounce rates.

 

So how can you get started with making your website mobile-friendly?

A convenient and SEO friendly option is to use a content management system like WordPress. It has a one-click installation. Then you just need to choose a responsive theme and mix a couple of SEO plugins like Yoast SEO.

If you want to offer a superior experience to your users, you can purchase a responsive theme from marketplaces like StudioPress or ThemeForest. Just set the ‘mobile responsive’ filter.

image52

Once you’ve completed a responsive design, test your website to ensure it runs smoothly. You can restrict download of full-sized images meant for big screens and limit number of HTTP requests (as well as CSS and JavaScript).

But ensure that the design supports any other specific customer requirements like shopping carts and account logins.

You can even spy on competitor websites in your industry and adapt them on your website.

Here are 3 webmaster tools by Google to help you pass the mobile-friendly litmus test.

1. Mobile-Friendly Test – Just key in your website and press the ‘Analyze’ button.

If your website receives a green message like the one below, your webpage has passed the test.

image14

In case your website isn’t friendly, you’ll receive recommendations to take corrective measures.

 

2. Robots Testing Tool – Due to a single robots.txt error you can experience a huge drop in your search visibility.

image35

Google’s robots testing tool will show you how Google crawls your robots.txt file, and report any errors.

image09

As an example look at the default robots.txt file in Joomla below. Google bots are blocked from accessing the images and templates directories. And hence the website will be deemed mobile incompatible by Google. So the webmaster needs to diagnose these issues.

image36

You can also setup notifications for robots.txt file changes using a free tool – changedetection.com.

image37

3. PageSpeed Insights – As you might know, internet connections on mobile devices are slower. And with our shrinking attention spans, a second delay in your web page loading might be worth a thousand dollars of business loss.

image67

Page Speed Insights is a great tool that grades your website based on its speed. And it also offers some recommendations for speeding up.

image38

Unless you’ve specific requirements and necessary resources, stay away from designing a dedicated mobile website.

  • You will need to allocate resources and budget to manage both the websites separately.
  • It might lead to divided PageRank between the two versions of your page. Or duplicate content issues if you don’t configure your web pages properly.

You’ll need to perform these additional steps to ward off such issues.

image01

image39

And you also need to redirect smartphone users to appropriate separate URLs, not a 404 error page.

image26

The responsive experience doesn’t need to end on your website. As of 2013, Litmus found that 47% of marketing messages were opened on mobile.

image68

In a 3 week test, CareerBuilder achieved a 15%-17% increase in email open rates and a 21%-24% increase in CTR by shifting to a responsive email design.

image55

Most email marketing service providers like Aweber, MailChimp and GetResponse offer responsive email templates. So you can directly use them to cater to your mobile users.

3. An elegant 404 page

You don’t want to lose your first time visitors who typed a wrong URL or visited a broken link on your website. So even for these visitors you thought of creating a great experience so that they remember your brand. After unleashing your creative side, you crafted a memorable 404 page.

But you know what? You might have forgotten to add one essential element…

A link back to your website pages.

It seems so trivial that most webmasters miss it.

But a broken link without proper navigation options is not just bad user experience. It can eventually lead to loss of search rankings.

On the other hand, linking to random pages is so effective to increase the number of indexed pages that I’ve personally increased Techcrunch’s traffic by 9% in a month using it.

Want to know how?

By running an algorithm that linked to 25-50 random internal pages from the website.

image46

You can also link to your most popular pages. Like ModCloth does.

image31

But include at least one link back to your homepage. Like Devian Art.

image18

Don’t leave the visitor confused and let him drop off by using technical jargon like the 404 page below.

image23

A well-crafted 404 page can re-engage an unhappy visitor. Or even turn them into email subscribers if you offer a free eBook like Leadpages does on its error page.

image48

You’ve to carefully watch out for 404 pages especially if you’re re-launching your website.

For a client website, Ben Cook and his team created a contact form on the 404 page. The reason was that the existing site structure was old with thousands of pages and files. Serving 404 pages to the visitors was inevitable.

image03

On the contact page, Ben apologized for the mess and asked for missing information. And also assured the visitors that “we’ll find it and send you an updated link or include the file as an attachment.”

The website visitors were convinced as Ben and team received several emails requesting information

image69

4. Serving irrelevant and intrusive pop-up ads

They’re not indexed by search engines. And they mostly aren’t even a part of a designer’s work plate. Web users tend to click on the close button as soon as they appear. No wonder Chrome by default blocks them from appearing.

image16

But still they have made it to mainstream usage due to the incredible results they drive.

I am talking about pop-ups.

Yes they can get really intrusive. 70% of Americans complain that are annoyed by irrelevant popup ads.

But they’re a great tool to increase your email signups. Dan Zarrella found that his subscriptions doubled with popups. And interestingly, his bounce rate remained the same.

image45

Even Entrepreneur.com found a 162% increase in sales by serving limited time offers in pop-ups to targeted visitors.

I don’t want to get in the debate of whether pop-ups should be used despite them being bad from a user experience perspective.

Remember the key is to make your pop-ups unobstructive and relevant. Try to offer such irresistible value to your visitors that they don’t feel intruded.

Getting pushy in your pop-ups like the one below might actually not persuade your customers to click yes…

image13

So I would advise you to use more valuable copy explaining benefits to the user.

 

 

Webmeup received 95% of its subscribers from popups in its first couple of months. And look how they clearly list 3 major benefits of signing up for updates in their pop-up advert.

image40

1. The time for showing the pop-up can make all the difference between its perceived value.

You can either shove it up immediately after a new visitor lands on your website in 3 to 5 seconds.

Or allow him sufficient time to engage with your content for 30 seconds and then show him the pop-up.

Obviously you need to test your audience preferences.

But SumoMe found that 5 seconds is the sweet spot for collecting maximum emails. It’s sufficient time for a visitor to have a glance at your website. Cross the 5 second mark and the visitor might get busy with content on your website.

image71

2. The next important aspect is whether pop-ups need to be turned off for your regular visitors. As a webmaster nothing will make you happier than collecting more emails.

But showing pop-ups to the same visitors again can be really annoying for them.

SumoMe found that it’s okay to keep asking your visitors for their emails every time they visit your website.

The maximum number of emails were collected for pop-ups showing every minute and month.

image61

So if you find a reader revisiting your website, you can ask for his email. It’s not going to hurt them.

3. Generally your CTA should have a contrasting color to your website color spectrum for getting more clicks.

But using color psychology can also prove helpful many times.

SumoMe found that a red colored email submit button invited the maximum number of email signups. The reason might be our association of red with stopping.

image54

5. Want a flash at my frames?

That’s a pretty ridiculous question. And so is using too much of flash or frames on your website.

Yes, flash might be visually attractive, but it’s badly (or rather not) indexed by search engines.

A homepage based on Flash is one of the biggest SEO blunders. Look at the difference between how humans and search engines see a flash based web page.

image27

That’s right. No bailing monkey information is visible to search engines. So it’s incredibly difficult to get such a website to rank in search engines, since there’s no content on your homepage for indexing.

If you think that Flash is liked by web users, then you’re wrong. Look at the results from a poll on Flash splash screens. 78% of respondents indicate that they don’t like Flash.

image29

In fact, Google Chrome has already stopped auto-playing of flash ads. Because it hindered web browsing experience.

You should also not use flash in your website’s important elements. It seriously affects your website’s usability – you’ll experience issues with your navigation, bookmarking, font resizing, etc.

Look at the problems found with a flash based web design of a professional services company.

image60

Needless to mention that mobile devices don’t support Flash. So you might need to create a dedicated mobile website besides your flash based desktop one.

Just like CheeseAndBurger.com did.

Here is their flash based desktop version.

image02

And here is how the CSS-based mobile version looks.

image70

Remember we already discussed maintenance, resource and budget issues with having such separate websites for different devices?

You should switch to flash alternatives like HTML5 for embedding videos on your website. You can also use CSS.

If you’re confused whether your website has Flash based elements, then you can perform a test using SEO SiteCheckUp’s Flash Test tool.

image28

Similar to Flash, there’s another obsolete technology I want you to meet…

Frames.

The content inside them is hidden and difficult for search engines to comprehend.

Indeed Frames disrupt the entire concept of a webpage as the atomic unit of information. They’re difficult to navigate for the users.

image63

Don’t prevent smooth crawling and indexing of your content by sectioning them with frames.

Note: I am not talking about inline Frames (or iFrames). They allow you to embed a page from another website in your website’s code. And they don’t affect your search engine rankings.

6. Filling up your webpage with every element imaginable

How many images are there on your homepage? And how many social media sharing icons do you use?

Fancy graphics, animations, redundant code and excessive widgets can lead to slower loading time. And slow pages don’t just equate to bad user experience. They are also a critical search engine ranking factor (besides degrading your conversions).

Google even started to show ‘slow to load’ labels in search results for mobile devices.

image43

Let’s fix the speed-killing elements on your website.

Step #1 – Test your website with Pingdom speed test tool

You’ll first get a summary of your page size and loading time along with a grade.

image65

But you’ll also get a detailed breakdown of the specific files with their size and their contribution to page loading time.

image62

You can then work on removing heavy objects. But if you need high-resolution images and HD videos, then you can work on making the other elements on your page lighter.

A major factor that leads to slower loading time is the huge number of HTTP requests (up to 80% of response time for the end user is tied to them). You can use these 3 strategies to lower your requests.

Step #2 – Send the “pre-built” version of the page using page caching

If you’re running your website on WordPress, do you use a cache plugin?

Without activating page caching, you’re essentially asking the server to build your page every time a visitor requests it.

image15

By using page cache, you can send the page to the user immediately.

image33

The only downside is that pages that require authentication cannot be cached. And if you made some changes to your page, the cache will need to expire for the changes to show up.

Step #3 – Clean your website’s code

This is a big hidden factor in determining your website speed. If you hire a cheap developer, there are great chances that you’ll get a messy and disorganized code.

You need to delete all those empty HTML tags.

Lara Swanson at Dyn found these offenders that lead to a higher page load time.

image22

Want to get started with cleaning your code? Here are 3 resources.

  1. Minify your CSS using Clean CSS.
  2. Clean your dirty HTML and JS at Dirty Markup.
  3. Follow these 12 principles for keeping it clean.

Conclusion

Your developers, website designers and SEOs need to interact with each other and work in tandem for creating a seamless user experience.

Even if you’re doing a major site relaunch, your preference shouldn’t be to just meet the deadline. Rather to also maintain your search traffic and engagement levels.

During their relaunch, Moz experienced an increase in their performance. You should aim to be like them by focusing equally on SEO besides your design.

image59

This is an abridged version of the original blog post by Neil Patel. Click here to read the full version.

Comments are closed.