Does Google treat text kept behind "read more" links with the same importance as non-hidden text? The short answer is "no," but there's more nuance to it than that. In today's Whiteboard Friday, Rand explains just how the search engine giant weighs text hidden from view using CSS and JavaScript.
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 going to chat a little bit about hidden text, hidden text of several kinds. I really don't mean the spammy, black on a black background, white on a white background-like, hidden text type of keyword stuffing from the '90s and early 2000s. I'm talking about what we do with CSS and JavaScript with overlays and with folders inside a page, that kind of hidden text.
It's become very popular in modern web design to basically use CSS or to use JavaScript to load text after a user has taken some action on a page. So perhaps they've clicked on a separate section of your e-commerce page about your product to see other information, or maybe they've clicked a "read more" link in an article to read the rest of the article. This actually creates problems with Google and with SEO, and they're not obvious problems, because when you use something like Google's fetch and render tool or when you look at Google's cache, Google appears to be able to crawl and parse all of that text. But they're not treating all of it equally.
So here's an example. I've got this text about coconut marble furnishings, which is just a ridiculous test phrase that I'm going to use for this purpose. But let's say I've got page A, which essentially shows the first paragraph of this text, and then I have page B, which only shows part of the first sentence and then a "read more" link, which is very common in lots of articles.
Many folks do this, by the way, because they want to get engagement data about how many people actually read the rest of the piece. Others are using it for serving advertising, or they're using it to track something, and some people are using it just because of the user experience it provides. Maybe the page is crowded with other types of content. They want to make sure that if someone wants to display this particular piece or that particular piece, that it's available to them in as convenient a format as possible for design purposes or what have you.
What's true in these instances is that Google is not going to treat what happens after this "read more" link is clicked, which is that the rest of this text would become visible here, they're not going to treat that with the same weight that they otherwise would.
All other things being equal
So they're on similar domains, they have similar link profiles, all that other kind of stuff.
- A is going to outrank B for "coconut marble furnishings" even though this is in the title here. Because this text is relevant to that keyword and is serving to create greater relevance, Google is going to weight this one higher.
- It's also true that the content that's hidden behind this "read more" here, it doesn't matter. If it's CSS-based, JavaScript-based, post load or loaded when the HTML is, it doesn't matter, it's going to be weighted less by Google. It will be treated as though that text were not as important.
- Interestingly, fascinatingly, perhaps, Bing and Yahoo do not appear to discern between these. So they'll treat these more equally. Google is the only one who seems to be, at least right now, from some test data — I'll talk about that in a sec — who is treating these differently, who is basically weighting this hidden content less.
Best practices for SEO and "hidden" text
So what can we discern from this? What should SEOs do when we're working with our web design teams and with our content teams around these types of issues?
I. We have to expect that any time we hide text with CSS, with JavaScript, what have you, that it will have less ranking influence. It's not that it won't be counted at all. If I were to search for "hardwood-like material creates beautiful shine," like that exact phrase in Google with quotes, both of these pages would come up, this one almost certainly first, but both of these pages would come up.
So Google knows the text is there. It just isn't counting it as highly. It's like content that isn't carrying the same weight as it would if it were visible by default. So, given that we know that, we have to decide in the tradeoff situation whether it's worth it to lose the ranking value and the potential visitors in exchange for whatever we're gaining by having this element.
II. We've got to consider some creative alternatives. It is possible to make text visible by default and to instead have something like an overlay element. We could have a brief overlay here that's easily close-able with a message. Maybe that could give us the same types of engagement statistics, because 95% of people are going to close that before they scroll down, or they're going to receive a popover message or those kinds of things. Granted, as we've discussed previously on Whiteboard Friday, overlays have their own issues that we need to be aware of, but these are possible. We can also measure scroll depth by doing some JavaScript tracking. There's lots of software that does that by default and plenty of GitHub repositories, that are open source, that we could use to track that. So there might be other ways to get the same goals.
III. If it is the case that you have to use the "read more" or any other text hiding elements, I would urge you to go ahead and place the crucial information, including the keyword phrases and the most related terms and phrases that you know are going to be very important to rankings, up in that most visible top portion of the page so that you maximize the ranking weight of the most important pieces rather than losing those below or behind whatever sorts of post-loading situation you've got. Make those the default visible portions of text.
I do want to give special thanks. One of the reasons that we know this, certainly Google has mentioned it on occasion, but over the course of the last few years there's been a lot of skepticism, especially from folks in the web design community who have sort of said, "Look, it seems like Google can see this. It doesn't seem to be a problem. When I search in quotes for this text, Google is bringing it back." That has been correct.
But thanks to Shai — I'm sorry if I mispronounce your name — Aharony from Reboot Online, RebootOnline.com, and I'll link to the specific test that they performed, but they performed some wonderful, large-scale, long-term tests of CSS, of text area, of visible text, and of JavaScript hiding across many domains over a long period and basically proved to us that what Google says is in fact true, that they are treating this text behind here with less weight. So we really appreciate the efforts of folks like that, who go through intense effort to give us the truth about how Google works.
That said, we will hopefully see you again next week for another edition of Whiteboard Friday. Take care.
Hi
Great video.
Sorry about my beginner question, does this also apply to tabs and accordions/spoilers that we use to breakdown and make more readable big pieces of content?
Hi Paulo,
I´m no expert but as far as I know accordions contain both javascript & css or css only.
Yes this is correct. The best way to lay content out on a page is a tiled layout - that can be broken up by a series of images / videos and / or charts. That way you don't hit your visitors with the dreaded wall of text.
And what about new theme builders that many of us use? çthe text is shown in form of accordions, tabs or other items including code. What would you recommend in these cases?
By the way, great, great post.
Great WBF as always, Rand.
I've always recommended the best practices that you've outlined, however, I'm not as sure now due to the upcoming mobile-first index. How do you think this will affect things?
Gary Illyes has said that content that's in accordions or hidden behind 'read more' will be given full weight if done for user experience purposes as it makes sense on mobile.
I'm a little disappointed by this WBF Rand. It's a great topic of course but there's no mention of how this will be changing with the upcoming mobile-first index where Gary Illyes has said hidden text will be given full weight instead of partial. This is really important for usability and I hope you'll do an update when that is live. The other important element missed here is that much of the "hidden text" out there isn't actually loaded into the DOM until clicked. If that's the case, then Google can't actually see it and won't give it any weight at all. Basically, the distinction between loaded in the DOM and hidden and only loaded in the DOM when clicked needs to be covered.
The most awaited post Rand! Interesting too..
Agree that by default hidden content gives less weight for search engine ranking. But is it for desktop or mobile ranking? Is it true that hidden and visible text 'well below the fold' will act similarly?
Sometimes we want to display hidden content, creating a plain text transcript content and put in no script tag. It is a good way for visibility and maintaining user experience.
In the case of using 'read more', you touch a crucial point and did a great job. BTW content relevancy, visibility, crawl-ability is most important for us and this time Moz new site crawl playing a major role.
Thank you for insightful WBF.
Last year, I launched a few online shops, all in WordPress with a WooCommerce plugin, and they all had implemented microdata. In this case, all the shops had hidden product description markup, and outranked other shops with a description of the products in the excerpt. It seems to me that with classic websites (local business, etc.) the situation is slightly different, that is - exactly like you described it in this article.
Same deal for accordions I'm assuming?
For me the biggest challenge with all this will be when the index eventually goes mobile.
With that in mind, maybe Google is working on ways to better handle "hidden text" as the last thing you want on a small device is 3000 words of text before the call to action :)
Hi Rand,
Great Whiteboard Friday!
I really appreciate that you bring to us a well based argument for our discussions with developers.
Truly, I do not know exactly why developers adore the CSS and the Javascript.
I was very aware of the fact that is best to show the text by default, although with not the authority to refute their preferences.
Thanks to your Whiteboard Friday I am sure I will win the "battles" on that regard from now on.
They adore strange designs, its their job. I recently change a text in an accordion to show completely with an improve in serps.
I suppose it fits with common sense that hidden content is likely to rank lower but it's great to see pretty conclusive proof from Reboot Online.
Thanks for the WBF and the confirmation on this subject. This was something that we changed on our site about 2 weeks ago and have seen the positive results.
Does the animation of text coming into view discount the text as well? There are some cool features that Visual Composer (wordpress theme) uses to have the text "float" into view as the user scrolls down... is this bad?
Please could you include a link to your web and a comment about what you changed or how? I would really apreciate it. Thank you.
Agree that by default hidden content gives less weight for search engine ranking. But is it for desktop or mobile ranking?
Is it true that hidden and visible text 'well below the fold' will act similarly? Sometimes we want to display hidden content, creating a plain text transcript content and put in no script tag. It is a good way for visibility and maintaining user experience.
In the case of using 'read more', you touch a crucial point and did a great job. BTW content relevancy, visibility, crawl-ability is most important for us and this time Moz new site crawl playing a major role.
When used correctly the dynamic loading of content can provide a very nice user experience. It also can have the affect of reducing the number of pages/URLs that you have on a website because instead or directing users to a new page the content appears on the same URL. From a broader perspective this must be a challenge for the Search Engines. Traditional page/keyword targetting is not as straightforward with this methodology and in theory you can serve a whole site from a single URL.....from what you say this obviously not a wise tactic just now but is that a realistic direction of travel. I am not suggesting the URL will die (can it?)
Also...if Search Engines are making an effort to read the dynamically loaded content how can they provide the Searcher with a link that will automatically show that hidden content.
this has really made me think and sorry for doing that out loud here.
Very helpful post! My team often receives push back when we recommend not using expand/collapse or accordions and tabbed content. Hopefully, this will help us strengthen the argument
I thought that we could still use the accordions but it seems that Google is less and less liked, so we expand the scroll of the web ;-)
Hi Rand,
Another great Whiteboard Friday session, you really touched an important topic about hiding text behind CSS/ Javascript.
There is another thing you enlighten your views on, i.e the "Read More" strategy being used by SEO / Content writers for reducing bounce rates, click bait the users to next pages, also increase time on the site sometimes by breaking the bigger (even not so bigger) content into smaller pieces.
What we have observed that even though it increases some cosmetic aspects of reports like bounce rate , time on pages or site, if a content is broken into too small pieces (including pictures and text) the impact on SEO in pretty negative. Having observed this trend, we have started building long articles and trying to avoid breaking the content wherever possible. This has lead to tremendous rank improvement if the page is optimized well for the content (including images) and links (internal and external).
Your views would be much appreciated on this one.
Regards,
Vijay
Really useful whiteboard. Long time since I didn´t think about it, but the question was on my mind until now. Thanks to solve it ;-)
For my blog I´ll keep using the "Read more" tag, because I think is better for the user experience, but put the valuable keywords in the top part is a really good point and it will become a must for me.
Absolutely great work here, Rand. But, as everybody is noticing what Garry Illyes has said while talking about mobile-first index, it is something that needs re-work here.
I have seen various websites with CSS & JavaScript based buttons, but they now hardly use it for the same page content with the text, "Read More". They are directed towards a different page altogether. And, I am sure this is definitely going to help in rankings.
What are your thoughts?
Cheers Rand! Always look forward to Whiteboard Friday and this is why. Thank you for this. Imagine if we had css hiding the text from the eye but totally seeable in the back end code. So if we had CSS code only letting users read the text when they hover over? Can this be bad SEO?
A good contribution Rand. This is a test of how web design should go hand in hand with programming and SEO, given that these practices will worsen the design of our website.
I only use this mode when I present on my website the curriculum of the professionals that make up the company and only for the section "other courses" that is very accessory, and also distorts the keywords of the candidates when taking courses very diverse.
Otherwise it is better to make designs that are visible all the elements of the page and thus we will not have problems with the algorithm. With tile designs we can keep a good overview of the page.
I am a layman to this SEO world and was not aware of this concept, I thought Google gives equal importance to both the content.
As per this great info about "read more" or "hidden content", it is clear that if I am targeting any of my websites in US, where Bing works well, it will be beneficial.
Let's take an example if my SEO Blog - Search Engine Guruji, has any post that is for US, or can say is targeted in US with read more buttons, it gives equal importance to both the content that is visible as well as one that is hidden?
[Link removed by editor.]
Thanks for clarification around hidden text supported by the tests that Reboot Online was performing. Luckily we don´t use CSS or Javascript for this purposes but instead we link to a new page.
I am assuming that the old technique of opening the "read more" button in a new page is outside of this problem. If B is a new landing page with the specific content the user wants to read it should outrank A, right?
I am going to change my short descriptions with the most relevant content of the full article (now I just have the beginning of it) but in my page we use the "read more" button to open a new page and now I´m concerned about ranking for the destination page with full article content.
Thanks Rand for great article, But i don't have much knowledge about CSS, JavaScript. Should I have to take help from a developer to fix this issue?
Nice one Rand! I recently bumped into an issue related to this: I have a list of product reviews on my product page, and I would show just 2 and a Show more reviews button that would reveal the rest of the reviews.
Worked great, until Google warned me that this was considered Spammy structured data. Then we changed it back to just showing all reviews, and it was reconsidered by Google quickly.
So take care when putting structured data - especially reviews! - in hidden text.
Thumbs up for this one. But will it work for mobile first also?
if i add a <div style="overflow-y: scroll;">example text</div> are the same case? this not use Javascript
If you can scroll to the content, it isn't hidden, so I guess it would'nt be a problem. The fact that it doesn't use javascript is not relevant.
i think this need a test
So it would affect only hidden content? What about content in tabs or accordions?
Not sure, but I don't think it's any different. In both cases it's content that's initially hidden, and requires you to click something to show it
I guess, thank you Rick
Great WBF Rand. It is a subject that I have not looked into for a while and have always been a bit tentative with when designing sites that feature accordion/ tabbed content, normally I try to opt for everything in view, but granted sometimes this is not possible and will potentially impact a users experience. Finding the balance is difficult,
Lately have been using Rich Snippet Schema Generator using json adding them to javascript tags. Google does capture the snippts fast and helps in link indexing. That what i have experienced so i guss javascript / json works.
I have an interesting case where I have a site with over 80 featured snippet wins in the highly competitive luxury travel market, and for the vast majority of these, google is taking the snippet from text that is hidden on the page. It seems that if the penalty was highly significant, that it would not pull quotes and feature them as snippets. My theory is that the improved usability and greater content "density" that is created by hidden text is enough to offset the negative impacts in this case.
Great work and well written article. CSS and javascript are important ranking factors as far as Google is concerned, blocking CSS and javascript files causes a very sharp negative impact on your rankings and your whole SEO project. You have to let Google crawl your pages like a normal human, where you can juice out most of the ranking factors from your website and get it ranked well and in a positive manner. In this process, it crawls your hidden texts as well, where Rand has highlighted some wonderful points regarding the best practices you need to consider and follow.
I think GG treat such hidden text as fair because they think that hidden content is not important. I assert that 50% of hidden content is not important, and about 40% of hidden content can be ingenious content spam.
Hi Rand..Nice post I was checking continuously this blog and I am impressed! Very useful info specifically the ultimate section I maintain such info much..I was looking for this certain information for a long time.Thank you and best of luck.
Hi Rand,
I know this post went live back on June 9, but I would still really like to hear your take about what you presented here and how it relates to what Gary Illyes said (Nov 2016) about hidden elements for UX not being discounted in search.
Many others have commented on this thread asking for this same information. Looking forward to the response.
Hi Rand,
Great post! I've been wondering about this issue for some time. Do you know if there is a difference between CSS, Javascript, and NEW HTML? We recently implemented a somewhat new html code on our website with the tags "details" and "summary". Do you know if those tags are treated the same as CSS or Javascript?
Thanks in advance!
Thanks for sharing.. It's a really helpful and informative post when your web site is eCommerce and you can see read more in product page then this post is a helpful.. Also thanks because here you can specify hidden text is not for black hat SEO or spamming..
How does this impact backlinks that are being loaded via JavaScript or CSS? Will a link loaded via javascript not give as much of a SEO benefit to the third party site?
Very Interesting! I guess "Read More" has become more relevant with the fact that mobile browsing is getting dominant. Although fully visible text seems better for user experience on a desktop but may not be ideal on a mobile device so Google might have to follow Bing and Yahoo. On a side note, my friend is looking to start a furnishing business and I can certainly suggest him to brand it as "Coconut marble furnishings" :)
This is really a nice and informative.Much obliged for making such a cool post which is truly exceptionallywell written.Thanks for sharing it
Anyone who can answer? How is text that is within an ajax hover element, or set to opacity 0 with a fade in element treated?
I would say that the 0 opacity could probably be considered hidden content. Check your cached page, is the content visible for the search bot, but not for visitors, this could be considered hidden content. If not, than the content will not be found @all.
(sorry for my english) Hope it helps.
I believe Google has said that hidden text such as this will no longer be devalued once they role out mobile-first indexing.
Had read the full article from reboot online a few days ago, hopefully a little abstract will help people who doesn't want to dive too deep into data!
I have just a little question: except in the thanks parts, you didn't mentioned the text-area method to hide text, which seems to have similar result than no hidden-text at. Why not talking about it and what do you think about this method?
Interesting WBF, Rand!
I am no expert here, but as a user, I do like to read content on the go without wanting to see any advertisements in between. Similarly, a read more link with an advertisement beneath it doesn't seem to be a nice user experience for me.
On the other hand, if this is something done to capture if the readers are interested in the content or not by capturing their clicks on 'read more' link, I think that's the wrong metric to analyze that. Many times, users just click on a read more link out of curiosity to see what's there to read more, or, they just click to see if there is really something to read more or not, and that's surely not going to give us the real intent of the click.
To measure if the content is liked by the readers or not, I would like to check some other metrics instead, like its social shares, comments, referral social media traffic, backlinks, etc. This can give us a fair idea about our content's success or failure.
As a good practice to hide content for long posts, one can follow Wikipedia's example how they do that for their mobile users. It's even recommended by Matt Cutts back in 2013 - Matt on Hidden Text - SEL.
Thanks
Nice one Rand,
Thanks for this in-depth exploration of content housed behind Read More tags using javascript and CSS. It is a really grey area, it is probably best practice to keep content clearly in front of visitors and avoid having it behind various elements.
Will Critchlow from Distilled carried out a great split test on the use of javascript and saw an improvement in search performance with the removal of javascript. Thus backing up Rand's position above.
Cheers,
Kev
Anyone who can answer? How is text that is within an ajax hover element, or set to opacity 0 with a fade in element treated?
Hi, Rand - thanks for this video and the link -- I'm going to have to read it carefully a bit later.
What I find fascinating is that, to me, it's a real bummer if I have to click on the Read More button - even though it helps with the statistics and the measurements... Kinda ruins UX, I guess...
Take care and hope to see more next week!
After years of advising design teams not to place content behind tabs, I recently read that Google has stopped equating tabbed content with cloaking. If articles on other sites are to be believed, this is a very recent development, part of Google's understanding that majority-mobile audiences like the organizational structure of tabs.
I was hoping to see that addressed here... any word from Moz-land on this?
If a user can access the content, it's not cloaking, so you're not going to be penalised. However, it'll get less priority in Googlebot's eyes than content that isn't obscured.
This is really a nice and informative.Much obliged for making such a cool post which is truly exceptionallywell written.Thanks for sharing it
Thanks for the insight Rand - I sometimes use accordions and what you say about hidden text makes sense. i also think its about tying together the seo objective of the web page and being able to integrate this with design/ ux strategies.
With this in mind, what are the general advantages of using hidden text? Is it just an aesthetic preference or would it theoretically help reduce page load times?
Basically design reasons. If you want to show many options (items, team, services...) in the same page it may be useful to show the name and a possibility to 'read more.
I guess it doesn't improve page load time, as increasing the quantity of code (css, js...).
Hey there, the conclusion for me is again to mainly write for the people and not for robots. Regarding the JavaScript, which book is the best to learn from? As SEO, I really feel the importance of learning it for the future. Thanks and cheers, Martin
Hello, great post thank you for the information.
On 4 nov 2017 Garry Illyes from Google stated the following:
"No, in the mobile-first world content hidden for ux should have full weight."
https://twitter.com/methode/status/794896464476418...
Anny comment or input on this?
To what extent does this differentiation in weighting go when it comes to "hidden text" techniques? Rand didn't mention toggle/accordion HTML features, but I'm wondering if this applies to them also? Very important to consider.
To me, same idea apply for accordion. So if the first one is open and the others closed, their content will be given less weight by Google. Make sense as you deliberately choose your most important content to be open.
can you let me know which will be the best for writing blogs between CSS and JavaScript ?And also CEO ranking influence.
what about AMP page? Can you provide some information regarding amp page . Because I have implement amp on Trickspaid but have seen no improvement in ranking.
Thank you for providing such a wonderful list of new website as i hardly needed them.
Thank you so much once again. Keep it up
Nice try, but it is not working. Totally inappropriate.