Editor’s note: “Ask an SEO” is a weekly column by technical SEO experts Shelly Fagin, Ryan Jones, Adam Riemer, and Tony Wright. Come up with your hardest SEO question and fill out our form. You might see your answer in the next #AskanSEO post!
This week for Ask An SEO, we have a question from Ashley in Chicago. Ashley asks:
“Are modal popups crawlable? If not, how can the content that’s within them become crawlable?’
This is a great question Ashley, and like every SEO question the answer is: “It depends.”
Thanks for asking, stay tuned next week for more questions and answers.
Just kidding… let’s dive in and take a look at a couple of different scenarios.
Using a modal itself isn’t necessarily good or bad for SEO – it’s all about how the modal is coded and implemented.
In fact, let’s not limit this to modals. The following advice and techniques can also apply to popups, interstitials, and overlays as well.
Implementing Modals
There are two major ways to implement a modal.
Option 1: Include the Content in the Page Itself but Not Make It Visible at First
Typically you would hide it with some .css and then use JavaScript to update that .css to make the modal visible when some action occurs (like a user click).
The technical term you may hear in regard to this is that the modal content is “loaded as part of the DOM.”
In this case, the modal will be fully crawlable and indexed as part of the page by search engines.
(We can debate how much weight it will be given, but that’s a different question for a different day.)
Option 2: Dynamically Load the Modal Content in After a User Action
This is the “AJAX”-style approach. In this case, the content may not be indexed as part of the page because search engines will not take that user action to trigger it loading.
Depending on how it’s loaded, this could also cause other issues.
I’ve seen some sites that have all their modals as separate .html files that are then dynamically loaded on a user click.
Not only did Google not associate this content with the page, they actually indexed the separate .html pages containing that modal content – which aren’t really an ideal spot for users to enter a site.
In that case, we had to re-examine how we coded the modals, or at least get creative with robots.txt, nofollow, and noindex tags (again, a topic for another post.)
A good way to test both of these methods would be to disable JavaScript and view the source of your site in a browser. If you can see the modal text in the HTML source, then so can search engines.
In most cases, I advise clients to use modals and popups and overlays as sparingly as possible.
A commonly acceptable use is for viewing an image at a larger size, or for content that doesn’t require a new page load but isn’t related to the page content – like a login box, tooltip, legal disclaimer, etc.
Other Considerations to Keep in Mind
- Does the modal load automatically or when a user clicks it?
- Is there a set time frame before it pops up?
- Does it pop up on every page?
All of these things could potentially harm performance and conversion rates, as well as SEO – if they’re deemed to be annoying or intrusive like an ad.
The best practice for these is to not show an automatic popup/interstitial/modal/whatever on the first page the user views – especially if they’re coming in from (or are) a search engine.
More Resources: