User Experience vs Search Engine Optimization in the Hidden Text Dilemma
In the world of web design and SEO, the use of hidden text has long been a topic of debate. The practice involves concealing part of the content on a webpage.
Initially a form of spam technique used in early 2000s (and ineffective nowadays), hiding excessive text pivoted to a more ethical practice in the form of “read more” button. When clicked, ‘read more’ button reveals the full text. This technique is primarily aimed at improving user experience by keeping pages clean and uncluttered. The content is not visible but it’s also not hidden, either. However, the implications of hidden text for SEO are complex and warrant a closer look.
When Is It Safe to Use Hidden Text?
Does the Page Have Any SEO Value?
The very first thing to establish is if the page has a ranking potential. Most of the time, you do want pages of your website to rank for potential keywords. Yet, depending on the type of content you’re serving, SEO may not be your focus. Here are some examples, where you don’t need to worry about SEO implications when using hidden text:
Gated Content
There are many different types of gated content: free trials, ebooks, courses, white papers, product demoes, etc. to name a few. However, all of them work on the same principle: gated content becomes available to a user after they hand over some type of information, like filling out a user form. Gated content is commonly used for a lead generation. Ungated content mainly serves for SEO improvement and increasing brand awareness.
And, if you’re considering adding hidden text on pages featuring gated content, then you don’t have to worry about any SEO implications.
If the page does have ranking potential, then you want to look into how to safely implement hidden content.
What Are the Best Practices on Implementing Hidden Text for SEO?
Hidden text can be implemented in several ways, including through JavaScript or CSS to show/hide content as needed. The fundamental question is whether search engines like Google can see this hidden text and how it impacts their understanding and indexing of a page.
If the hidden text can be found in the raw or rendered HTML of the site, the implementation may be fine. Raw HTML is better. as rendered HTML means it requires javascript to load, which is more work for search engines, and therefore less desirable. But, still functional and workable, and definitely better than nothing.
Conversely, text that isn’t visible in either raw or rendered HTML will not be acknowledged by search engines at all. That simply means that if you can’t see hidden text in raw or rendered HTML, you don’t get any SEO credit for it.
How to Check if Google Is Indexing JavaScript Content?
There’s a million ways for developers to implement hidden text – via JS, on the page but show/hide with CSS, etc. And if you’re unsure how your website is being generated, there are several ways to check.
Checking Crawlability of Your Hidden Content from Google Search Console
You can use the “Live Test” tool with URL Inspection in Google Search Console, to see your website as Google. First, click on “URL Inspection”. Then, enter the URL you want to test at the top of the screen, and then press enter.
Then, if the page is already crawled and indexed, you can click on “view crawled page” button, to access HTML.
Another screen will open from the left, where you can use search box to find an example of your hidden text in HTML. Or, you can use copy tool to paste it into another editor and search from there if that’s more convenient to you.
And if you made recent changes and they are not reflected on the crawled page just yet, you can also live test the URL. At the top of the screen, click “Test Live URL” in the upper right corner of this same page. This will refresh the report with information about a fresh crawl.
Checking if Java Script Content is indexed via Google
The easier way is to simply copy a piece of JavaScript-added content and paste it (in quotation marks) into Google search box together with site: indicating the domain of the site. Here is an example of JavaScript generated section that returns content under “read more” button.
Read more
I like JavaScript!
Let’s now search for this phrase in Google, using quotation marks and site command for k-lab.digital.
“I like JavaScript!” site:k-lab.digital.
If the results are returned, then Google is indexing this content correctly. If not, then you need to do some troubleshooting.
Google’s Perspective on Hidden Text
Google’s ability to crawl and index hidden text largely depends on how the text is implemented. If the text is present in the raw or rendered HTML of the site, it’s likely that Google can access and consider it when understanding the page’s content. Raw HTML is preferable as it doesn’t require JavaScript to load, making it easier for search engines to crawl. Conversely, text that isn’t visible in either raw or rendered HTML may not be acknowledged by search engines at all.
SEO Implications
The hidden text is, by nature, considered less valuable than visible text. Google recognizes when content is hidden and may deem it less important in the context of the page. Therefore, it’s crucial to ensure that any content critical to understanding the page or important for the user is immediately visible without requiring further action to access it.
Hidden Text and Mobile Optimization
With the shift towards mobile-first indexing that Google finalized in October 2023, the use of hidden text on mobile pages has become more common. This approach is often justified by the limited screen space and the need to optimize user experience on mobile devices. However, the principle remains the same: Google does not differentiate between mobile and desktop content in terms of visibility. Content hidden for aesthetic or space-saving reasons on mobile devices will be scrutinized in the same manner as on desktop versions.
User Experience and SEO
When considering the use of hidden text, it’s vital to balance the benefits of a clean, user-friendly design with the potential SEO implications. Hidden text should be used judiciously, ensuring that it does not conceal important information or adversely affect the page’s ability to rank well in search results. Additionally, webmasters should be mindful of accessibility and legal issues that could arise from hiding content.
Other Forms of Hidden Content
Alt text for images
Single most underrated SEO tool is alt-text for images. Until Google and other search tools learn how to rank images by using images they rely on the copy linked of the image in the form of img ‘alt’ tag. If you don’t provide any description of the image, you might have skipped uploading it altogether.
Drop-down boxes and FAQ Accordions
These are common user-friendly techniques that provide the same visual relief as hiding content behind read more text, providing information without including all the text in one view.
Pop-ups
Referred to as “intrusive interstitials” by Google, pop-ups are the most difficult of the bunch to properly implement. They offer advice not to obcsure the whole page or redirect users to a separate page for their input and also cover use cases of mandatory interstitials in their guide.
In summary, while hidden text can be a useful tool for improving user experience, its impact on SEO cannot be overlooked. Web designers and SEO professionals must work together to implement hidden text in a way that benefits users without compromising the page’s visibility and ranking potential.