Menu

Technical SEO Issues — How to Resolve Them

3 Unexpected Examples of Technical SEO Issues (And How to Resolve Them) — Whiteboard Friday

Whiteboard Friday | Technical SEO

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

In this Whiteboard Friday, learn how to find technical SEO issues, how to define issues, as well as how to resolve them.

 
 

Hey, my name is Kristina Azarenko. I'm a Technical SEO Consultant, turned a course creator. I packed 10 years of my experience into two popular courses, Technical SEO Pro and Azure Friendly Website Creations. And I learned early in my career that in technical SEO, the devil is in the detail.

Because you might think that things are working properly, but then when you look under the hood, you might find that there is some minor technical SEO issue that is actually costing you lots of traffic.

And today I'm going to show you three specific examples of these unexpected technical SEO issues that you can find on your or your client's website potentially, and then how to resolve those issues. So let's start.

Buttons vs. links

 

The first one is buttons versus links. What do you know about this?

So buttons trigger an action like adding it to a cart or submitting a form. And links point from page A to page B, or page one to page two, whatever. They serve as part of internal linking or external linking and really help with navigation across the websites. And then buttons can be styled as links, and links can be styled as buttons. That's where things might get tricky.

And one more thing is that from a web perspective, buttons are added with a button or input if they're a part of the form. And links are added with a href and then a URL.

 

The issue happens, though, when buttons serve as links. I've seen it on many websites when people want to style a link as a button, but then they want to add the link there. And what they do, is they use window location and then href URL, or they use an on click event to the URL.

Well, from a user perspective, nothing is different if there is a link or a link added like this into a button. But from a web development perspective, from a web sender's perspective, that makes a huge difference because, in this case, you rely on Google to interact with your content, and Google doesn't. And in this case, in the second case, when you have href and then the URL, you're actually telling Google everything is great. You just use this link to attribute it to the internal linking on my website, and that's exactly what you want to do, especially in the main navigation of the website.

How to do it right

To sum it up, when it comes to buttons and links, use links to point from one page to another page. Use buttons when you want to trigger some action like adding to a cart or submitting a form. And don't confuse the two. That's it. These are the rules. They're pretty simple, and they will definitely help you in different situations when you need to decide what element to use.

Images as backgrounds

 

Okay, so onto the next one. Images as backgrounds. It's not a surprise that images are important because images appear in Google search results and drive image search traffic, but it only happens if Google can actually index those images.

 

The issue, though, happens when images are added as background images with CSS. Again, I've seen it so many times when people use background images while, in reality they meant to use normal images that they want to be indexable and then rankable. But it will not be possible if you use CSS for adding images because they are treated as background images. And even though there is a URL pointing to the image location, you explicitly tell Google to disregard this image in terms of ranking and in terms of indexing because this image is just a background image which is part of the design. It makes sense.

How to do it right

So if you want the images to be indexable and rankable, use image and then source and then point to the image location. To sum it up, use image sources for indexable images. And if you want to use CSS, use it but for background images only that are only part of the design, and you don't really care for them about bringing traffic to your website.

Image lazy loading

 

Okay, and the last one is image lazy loading. It's very important to understand that it's very different how we see the website and how Google sees the website.

So when you go to a website, whether it's desktop or mobile, you see the content above the fold, whether it's images or the copy, and then you need to scroll to see the rest. But when it comes to Google Bots, it's very important to make sure that Google Bots can see all the content on the page right away.

 

So whether it's the copy, whether it’s images, you need to make sure that the whole content is seen so that Google can look at the page and estimate how optimized it is. Otherwise, if you just show some above-the-fold content to Google, that's not going to be enough.

And what's important to really get here is that Google doesn't interact with content, and Google doesn't scroll. So if you rely on Google to interact with your content or scroll, you will be disappointed because it will just not do that. And a good, really good example of this is when placeholder images are indexed instead of the normal images.

Placeholder image is kind of a dummy image that you would use below the fold to make sure that it's really light, so it doesn't impact the loading of the page, or the speed of loading of the page. And then once you scroll as a user, this placeholder image will be switched to the normal image. But guess what? Google doesn't scroll, so in this situation, what you need to do, you need to make sure that all the images are seen by Google.

So even if you're using placeholder images, you always need to have a default image URL that Google can go to, grab the image, index it, and so that it can be crawled. So that should be used here in the URL. So image source and then the URL, the URL of the default image, and the location. And then you can always use source to list the image files for different screen resolutions as well.

How to do it right

To sum it up, don't rely on Google to scroll or interact with your content. And secondly, use the image source and then the default image that Google will see and index, not a placeholder, but a default image.

To conclude

So as I said, technical SEO is really fascinating. I love it a lot. And with three things that I find really important for technical SEO to be really good in this field.

First of all, you need to know how to find issues like this, for example. You also need to define if this issue is a real issue or if it's some random alert from some SEO tool that you can actually ignore. And third, you need to know how to resolve this issue on this particular website that you are working on, considering the business goals, the tax tech, and the resources that you have. That's it. Thank you.

About Kristina Azarenko —

Kristina is a technical SEO with over a decade of experience in the industry.

She’s worked on the agency side, in-house and then as a consultant, she helped medium and large businesses build comprehensive technical SEO frameworks to ensure success in attracting valuable organic traffic from search engines.

Now Kristina uses all her hands-on experience to teach people around the world technical SEO using her signature TSP framework through the Tech SEO Pro course.

Her mission is to break down and simplify complex things so SEOs can understand and use them to advance their careers.


Related Post