Update on COVID-19. Learn more

SEO & CSS Display None: Is it Bad To Hide Content

Category: SEO, Technical

The body content on any page is always important to help that page rank for the topic and keywords being discussed. Good SEO best practices are to always have your content in plain text (never in flash of images), have good quality content above the fold and ensure your pages have enough content on them. The last point, having enough content on a page, is usually a pain point with a lot of websites. Sites like to be flashy and image heavy to capture the users interest and this usually limits the amount of quality text on a page.

SEO’s and wed/graphic designers always butt heads when it comes to adding more content to a web page, especially the home page. What seems to be a common compromise is to include content on the page but to hide or reveal it based on user interaction. Think of tabbed or accordion sections. Although this can be a good compromise in many cases, according to John Mueller in his latest Google Webmaster Central Office Hours Hangout, this may be limiting the value of that content. He goes on to explain that if a webmaster is setting content to display:none; (a functionality usually required by tabbed content/accordions), then that content is not immediately visible to users or search engines and is assumed to not be of high importance. I have seen many instances of quality content, highly relevant to a page, “hidden” in tabbed sections. Sites often list their indivualy services in tabbed sections, or ecommerce websites that have product specs and reviews in tabbed sections

What Is A Better Compromise For SEO

Don’t hide high quality content using display:none; or other techniques. Take that content out of the tabbed box or accordion. I know that is not much of a compromise for the designer so another option could be to ensure that each tabs content is individually crawlable by search engines. Perhaps by using URL parameters on each tab. Can you think of some other ways that designers and SEOs can compromise when it comes to putting plain text content on a page? Let me know in the comments!

How To Add Canonical and HREFLANG Markup To Your Site Using JavaScript

Category: Javascript, SEO

Recently I joined a google webmaster central office hours hangout where I asked the question:

“…is implementing hreflang and then modifying a canonical tag using JavaScript. So you see that being an issue or something that Google would recognize?”

John replied suggesting that it “could work” however instead of swaping canonical or hreflang tags between static HTML and rendered HTML, ensure the static HTML version would not have those signals from the start and insert them using JavaScript.

“What I might do in a case like that is just not provide a canonical in the static HTML version and then add one with JavaScript, so that signal is clear, like, this is the only signal that we have”

My question recently got featured in an article on SEO Round Table so I’m happy to see this answer may help out other SEO’s as well! Below is the video