Skip to main content

Someone recently asked me whether or not Google indexes content wrapped in an aria-hidden='true' attribute. My answer was a resounding “huh, I’ve never thought of that”. So I did some quick google searches and asked around, but I was unable to find any recent research on the subject.

I thought this was a great question. Many design patterns depend on hidden content in one form or another, from accordions, to tab panels, to drop-down navigation, to responsive design, and even slide-in navigation. If this content is hidden from google, it could dramatically hurt your SEO.

TLDR;

Google indexes things. They try to be smart about not indexing things. As long as you are not trying to abuse their algorithm, you are probably okay to use aria-hidden, display:none, and .sr-only to hide things as long as you do so appropriately and with your users in mind. That being said, it is probably worth double checking your content if you are worried.

Methodology

The first thing I needed to do was set up a test. To do this, I added an SEO test page to my blog that that contained several elements, listed below. Each element wrapped plain text unique IDs. Those unique IDs are what make this test work because I can perform a google search for those IDs and filter the results to only my site. If google returns a result for the unique IDs on my test page it means it was successfully indexed. If not, it means that google ignored it. An example google search looks like this: site:https://mfairchild365.github.io “9ae35a93”. I included the following tests:

  • A control test: no hiding of any sort
  • hidden attribute (css display:none): hidden from all users
  • aria-hidden="true": hidden from just assistive technology
  • .sr-only (bootstrap): hidden from visual users and available to assistive technology

Hypothesis

My guess was that only the test with the hidden attribute would be ignored by Google because it is never displayed. If you look at Google’s hidden text and links document, it states “not all hidden text is considered deceptive”. The article goes on to describe that just because something is hidden for one visitor, that does not mean it will remain hidden for all visitors. The hidden text could be shown by activating a control, resizing your browser window (responsive design), or by different browsing technology such as screen reader software. Instead it sounds like Google will try to detect certain patterns that indicate attempted abuse of Google’s indexing algorithm.

Results

Google indexed all of the tests, even the hidden attribute test. Here are the results:

Test Unique ID Indexed by Google?
control be073074 yes
`hidden` attribute 287ffe07 yes
`aria-hidden` 696329e8 yes
`.sr-only` 9ae35a93 yes

Conclusion

As I described in my hypothesis, Google will try to index everything that it does not think is trying to game the system, even if it is hidden. Therefore, I believe it is safe to use any of the methods to hide content that I described described above. However, it is always important to verify. If you are ever in doubt, perform a Google search and filter it to only your site to verify that your content is indexed.


First posted on 05 December 2017