Have you thought about what your pop-ups might be doing to your SEO? There are plenty of considerations, from their timing and how they affect your engagement rates, all the way to Google's official guidelines on the matter. In this episode of Whiteboard Friday, Rand goes over all the reasons why you ought to carefully consider how your overlays and modals work and whether the gains are worth the sacrifice.

Click on the whiteboard image above to open a high-resolution version in a new tab!

Video Transcription

Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we're chatting about pop-ups, overlays, modals, interstitials, and all things like them. They have specific kinds of interactions with SEO. In addition to Google having some guidelines around them, they also can change how people interact with your website, and that can adversely or positively affect you accomplishing your goals, SEO and otherwise.

Types

So let's walk through what these elements, these design and UX elements do, how they work, and best practices for how we should be thinking about them and how they might interfere with our SEO efforts.

Pop-ups

So, first up, let's talk specifically about what each element is. A pop-up now, okay, there are a few kinds. There are pop-ups that happen in new windows. New window pop-ups are, basically, new window, no good. Google hates those. They are fundamentally against them. Many browsers will stop them automatically. Chrome does. Firefox does. In fact, users despise these as well. There are still some spammy and sketchy sites out there that use them, but, generally speaking, bad news.

Overlays

When we're talking about a pop-up that happens in the same browser window, essentially it's just a visual element, that's often also referred to as an overlay. So, for the purposes of this Whiteboard Friday, we'll call that an overlay. An overlay is basically like this, where you have the page's content and there's some smaller element, a piece, a box, a window, a visual of some kind that comes up and that essentially says, maybe it says, "Sign up for my email newsletter," and then there's a place to enter your email, or, "Get my book now," and you click that and get the book. Those types of overlays are pretty common on the web, and they do not create quite the same problems that pop-ups do, at least from Google's perspective. However, we'll talk about those later, there are some issues around them, especially with mobile.

Modals

Modals tend to be windows of interaction, tend to be more elements of use. So lightboxes for images is a very popular modal. A modal is something where you are doing work inside that new box rather than in the content that's underneath it. So a sign-in form that overlays, that pops up over the rest of the content, but that doesn't allow you to engage with this content underneath it, that would be considered a modal. Generally, most of the time, these aren't a problem, unless they are something like spam, or advertising, or something that's taking you out of the user experience.

Interstitials

Then finally, interstitials are essentially, and many of these can also be called interstitial experiences, but a classic interstitial is something like what Forbes.com does. When you visit Forbes, an article for the first time, you get this, "Welcome. Our sponsor of the day is Brawndo. Brawndo, it has what plants need." Then you can continue after a certain number of seconds. These really piss people off, myself included. I really hate the interstitial experience. I understand that it's an advertising thing. But, yeah, Google hates them too. Not quite enough to kick Forbes out of their SERPs entirely yet, but, fingers crossed, it will happen sometime soon. They have certainly removed plenty of other folks who have gone with invasive or overly heavy interstitials over the years and made those pretty tough.

What are the factors that matter for SEO?

A) Timing

Well, it turns out timing is a big one. So when the element appears matters. Basically, if the element shows up initially upon page load, they will consider it differently than if it shows up after a few minutes. So, for example, if you have a "Sign Up Now" overlay that pops up the second you visit the page, that's going to be treated differently than something that happens when you're 80% or you've just finished scrolling through an entire blog post. That will get treated very differently. Or it may have no effect actually on how Google treats the SEO, and then it really comes down to how users do.

Then how long does it last as well. So interstitials, especially those advertising interstitials, there are some issues governing that with people like Forbes. There are also some issues around an overlay that can't be closed and how long a window can pop up, especially if it shows advertising and those types of things. Generally speaking, obviously, shorter is better, but you can get into trouble even with very short ones.

B) Interaction

Can that element easily be closed, and does it interfere with the content or readability? So Google's new mobile guidelines, I think as of just a few months ago, now state that if an overlay or a modal or something interferes with a visitor's ability to read the actual content on the page, Google may penalize those or remove their mobile-friendly tags and remove any mobile-friendly benefit. That's obviously quite concerning for SEO.

C) Content

So there's an exception or an exclusion to a lot of Google's rules around this, which is if you have an element that is essentially asking for the user's age, or asking for some form of legal consent, or giving a warning about cookies, which is very popular in the EU, of course, and the UK because of the legal requirements around saying, "Hey, this website uses cookies," and you have to agree to it, those kinds of things, that actually gets around Google's issues. So Google will not give you a hard time if you have an overlay interstitial or modal that says, "Are you of legal drinking age in your country? Enter your birth date to continue." They will not necessarily penalize those types of things.

Advertising, on the other hand, advertising could get you into more trouble, as we have discussed. If it's a call to action for the website itself, again, that could go either way. If it's part of the user experience, generally you are just fine there. Meaning something like a modal where you get to a website and then you say, "Hey, I want to leave a comment," and so there's a modal that makes you log in, that type of a modal. Or you click on an image and it shows you a larger version of that image in a modal, again, no problem. That's part of the user experience.

D) Conditions

Conditions matter as well. So if it is triggered from SERP visits versus not, meaning that if you have an exclusionary protocol in your interstitial, your overlay, your modal that says, "Hey, if someone's visiting from Google, don't show this to them," or "If someone's visiting from Bing, someone's visiting from DuckDuckGo, don't show this to them," that can change how the search engines perceive it as well.

It's also the case that this can change if you only show to cookied or logged in or logged out types of users. Now, logged out types of users means that everyone from a search engine could or will get it. But for logged in users, for example, you can imagine that if you visit a page on a social media site and there's a modal that includes or an overlay that includes some notification around activity that you've already been performing on the site, now that becomes more a part of the user experience. That's not necessarily going to harm you.

Where it can hurt is the other way around, where you get visitors from search engines, they are logged out, and you require them to log in before seeing the content. Quora had a big issue with this for a long time, and they seem to have mostly resolved that through a variety of measures, and they're fairly sophisticated about it. But you can see that Facebook still struggles with this, because a lot of their content, they demand that you log in before you can ever view or access it. That does keep some of their results out of Google, or certainly ranking lower.

E) Engagement impact

I think this is what Google's ultimately trying to measure and what they're trying to essentially say, "Hey, this is why we have these issues around this," which is if you are hurting the click-through rate or you're hurting pogo-sticking, meaning that more people are clicking onto your website from Google and then immediately clicking the Back button when one of these things appears, that is a sign to Google that you have provided a poor user experience, that people are not willing to jump through whatever hoop you've created for them to get access your content, and that suggests they don't want to get there. So this is sort of the ultimate thing that you should be measuring. Some of these can still hurt you even if these are okay, but this is the big one.

Best practices

So some best practices around using all these types of elements on your website. I would strongly urge you to avoid elements that are significantly harming UX. If you're willing to take a small sacrifice in user experience in exchange for a great deal of value because you capture people's email addresses or you get more engagement of other different kinds, okay. But this would be something I'd watch.

There are three or four metrics that I'd urge you to check out to compare whether this is doing the right thing. Those are:

• Bounce rate
• Browse rate
• Return visitor rates, meaning the percentage of people who come back to your site again and again, and
• Time on site after the element appears

So those four will help tell you whether you are truly interfering badly with user experience.

On mobile, ensure that your crucial content is not covered up, that the reading experience, the browsing experience isn't covered up by one of these elements. Please, whatever you do, make those elements easy and obvious to dismiss. This is part of Google's guidelines around it, but it's also a best practice, and it will certainly help your user experience metrics.

Only choose to keep one of these elements if you are finding that the sacrifice... and there's almost always a sacrifice cost, like you will hurt bounce rate or browse rate or return visitor rate or time on site. You will hurt it. The question is, is it a slight enough hurt in exchange for enough gain, and that's that trade-off that you need to decide whether it's worth it. I think if you are hurting visitor interaction by a few seconds on average per visit, but you are getting 5% of your visitors to give you an email address, that's probably worth it. If it's more like 30 seconds and 1%, maybe not as good.

Consider removing the elements from triggering if the visit comes from search engines. So if you're finding that this works fine and great, but you're having issues around search guidelines, you could consider potentially just removing the element from any visit that comes directly from a search engine and instead placing that in the content itself or letting it happen on a second page load, assuming that your browse rate is decently high. That's a fine way to go as well.

If you are trying to get the most effective value out of these types of elements, it tends to be the case that the less common and less well used the visual element is, the more interaction and engagement it's going to get. But the other side of that coin is that it can create a more frustrating experience. So if people are not familiar with the overlay or modal or interstitial visual layout design that you've chosen, they may engage more with it. They might not dismiss it out of hand, because they're not used to it yet, but they can also get more frustrated by it. So, again, return to looking at those metrics.

With that in mind, hopefully you will effectively, and not too harmfully to your SEO, be able to use these pop-ups, overlays, interstitials, modals, and all other forms of elements that interfere with user experience.

And we'll see you again next week for another edition of Whiteboard Friday. Take care.

Video transcription by Speechpad.com