Google text-only vs rendered (index and ranking)
-
Hello, can someone please help answer a question about missing elements from Google's text-only cached version.
When using JavaScript to display an element which is initially styled with display:none, does Google index (and most importantly properly rank) the elements contents?Using Google's "cache:" prefix followed by our pages url we can see the rendered cached page.
The contents of the element in question are viewable and you can read the information inside.
However, if you click the "Text-only version" link on the top-right of Google’s cached page, the element is missing and cannot be seen.
The reason for this is because the element is initially styled with display:none and then JavaScript is used to display the text once some logic is applied.
Doing a long-tail Google search for a few sentences from inside the element does find the page in the results, but I am not certain that is it being cached and ranked optimally... would updating the logic so that all the contents are not made visible by JavaScript improve our ranking or can we assume that since Google does return the page in its results that everything is proper?
Thank you!
-
Hi,
Google is quite clever at distinguishing what your code does and since you can search for the sentence inside the hidden element and find the page, it is being indexed.
What you’re seeing in the Google cache is what a user without javascript enabled would see, so it’s personal choice if you think this is a problem for your site or not. But if Google thinks your site has poor usability for non-js browsers your rankings may be impacted.
There are a few things you could do if you wanted to fix this:
1. Remove the hide class from your code and have javascript add this class so only users with javascript enabled will have the content hidden from them, leaving it visible to crawlers and in your text-only cache.
2. Google recommends using
<noscript>tags to display content that is dynamically added by javascript. I know your js is not adding the content, just displaying it, but it will have the same effect in the text-only cache – your content will be visible both with and without javascript enabled.</p> <p>Hope this helps,</p> <p>Tom</p> <p> </p> <p> </p></noscript>
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Does too much inline CSS impact SEO rankings
Hello, Does implementing a lot of inline CSS have a negative impact on SEO rankings? I imagine it could affect page speed, but any other issues I might run in to?
Web Design | | STP_SEO1 -
Google Search Console Block
Am new to SEO. My clients site was completed using Yoast premium and then used Google search console to initiate the crawl. Initially setup an http:// property and all seemed good. Then i removed that under search console an created an https:// did the render and it appears google has put a block and placed their own robots.txt file which basically has rendered the site useless. Feedback most appreciated.
Web Design | | BoostMyBiz0 -
Organization name as text vs. as a picture with alt text + Schema.org markup
I'm looking for some feedback to implement best practice for the markup of our header/navigation at the top of our site. Our organization name and a tag line is at the top of every page on the left, then our logo, then our navigation to items like "Topics" "FAQs" "About us" etc is to the right along the top. Our organization name includes the most frequently searched keyword for what we want to rank on, and our organization name is our domain name. A couple other background items: we're a non-profit startup and no code is public yet -- hence, I'll be explaining what we're going for. We're coding in straight html/css, not using Wordpress or anything like that. When we originally DIY coded our draft homepage and a few landing pages, we put the organization name and tag line into the markup as text, to look like this: Organization name | Pretty | Navigation items over here
Web Design | | scienceisrad
Explanatory fun tag line | Cool |
--------------------------------------- | Logo | --------------------------------------------------------- Then we outsourced the markup of two more landing pages to a company that does on-demand orders for responsive markup, based on png's we sent of the designs. The company's code renders a fabulous looking version of our design, and important for usability, it is responsive. The company also did something else I'm not so sure of. They made one big image out of our organization name, tag line and logo ... because? The indenting and different font sizes of the Organization name and tag line was too hard to code in? Or is it just best practice for html standards, SEO, etc. to make it one big logo?? Now, as part of an overall effort I'm working on to reconcile our different code ... I'm mulling right now specifically on reconciling the different approaches we each took and incorporating new best practices for the header ... based on what I'm reading online about headers, including debates about whether to use h1 for your company name, whether using an image for the name is fine, advice about including Schema.org markup for logos, etc. Given all this, which of these two options look better to you? Do they seem equally good to you? What would you change about the one that looks better to you? What do I have wrong in them? Or would you code this entirely differently to hit all best practices? What do you think about using h1 for organization name vs. is there a better tag to use for the organization name to code it in as text? (Note: we have other h1's on our pages for the actual article/content titles of each page, which maybe we should, maybe we shouldn't be having those as h1's?) Option 1 -- using text for our name and tag line: <header id="top" class="brandfont brandcolor">
[# Organization name Explanatory fun tag line](/) Organization name logo {navigation code here}
</header> Option 2 -- name, tag line and logo all as one big png image: <header id="header" class="container"> Organization name tag line {navigation code here}
</header>1 -
Curious why site isn't ranking, rather seems like being penalized for duplicate content but no issues via Google Webmaster...
So we have a site ThePowerBoard.com and it has some pretty impressive links pointing back to it. It is obviously optimized for the keyword "Powerboard", but in no way is it even in the top 10 pages of Google ranking. If you site:thepowerboard.com the site, and/or Google just the URL thepowerboard.com you will see that it populates in the search results. However if you quote search just the title of the home page, you will see oddly that the domain doesn't show up rather at the bottom of the results you will see where Google places "In order to show you the most relevant results, we have omitted some entries very similar to the 7 already displayed". If you click on the link below that, then the site shows up toward the bottom of those results. Is this the case of duplicate content? Also from the developer that built the site said the following: "The domain name is www.thepowerboard.com and it is on a shared server in a folder named thehoverboard.com. This has caused issues trying to ssh into the server which forces us to ssh into it via it’s ip address rather than by domain name. So I think it may also be causing your search bot indexing problem. Again, I am only speculating at this point. The folder name difference is the only thing different between this site and any other site that we have set up." (Would this be the culprit? Looking for some expert advice as it makes no sense to us why this domain isn't ranking?
Web Design | | izepper0 -
Hidden Text w/ Java Script _ Is it Bad?
Just came across an article that stated that Google is looking negatively at sites that attempt to hide text or use javascripts to expand text on websites. We are about to launch our new website and believe we are using this technique but im not certain if what we are doing will hurt us. Our website tends to be a little heavy on the text so used a "read more" scrpit that will expand when clicked on. Three sections that use this on the new website Take a look and let me know your thoughts http://joomplateshop.com/demos/catdi.com/
Web Design | | ChopperCharlie0 -
Links not visible in "Google cache text version" but visible in "Fetch as Google" in Webmaster tool
Hi Guys, There seems some issue with the coding due to which Google is not indexing half of our menu bar links. The cached text version of http://www.99acres.com/ is not showing links present in dropdown "All India" , dropdown "Advice" and "Hot Projects" tab in blue bar on top menu whereas these links are visible in "Fetch as Google" in Google Webmaster tool. Any clue to why is there a difference between the links shown in Google webmaster and Google cache text version. Thanks in advance 🙂
Web Design | | vivekrathore0 -
Is it cloaking/hiding text if textual content is no longer accessible for mobile visitors on responsive webpages?
My company is implementing a responsive design for our website to better serve our mobile customers. However, when I reviewed the wireframes of the work our development company is doing, it became clear to me that, for many of our pages, large parts of the textual content on the page, and most of our sidebar links, would no longer be accessible to a visitor using a mobile device. The content will still be indexable, but hidden from users using media queries. There would be no access point for a user to view much of the content on the page that's making it rank. This is not my understanding of best practices around responsive design. My interpretation of Google's guidelines on responsive design is that all of the content is served to both users and search engines, but displayed in a more accessible way to a user depending on their mobile device. For example, Wikipedia pages have introductory content, but hide most of the detailed info in tabs. All of the information is still there and accessible to a user...but you don't have to scroll through as much to get to what you want. To me, what our development company is proposing fits the definition of cloaking and/or hiding text and links - we'd be making available different content to search engines than users, and it seems to me that there's considerable risk to their interpretation of responsive design. I'm wondering what other people in the Moz community think about this - and whether anyone out there has any experience to share about inaccessable content on responsive webpages, and the SEO impact of this. Thank you!
Web Design | | mmewdell0 -
Redirect From .aspx to .html if already indexed - Website Redesign
Hi Guys I would like to know if somebody could possibly shed some light on this for me. We are in the process of re-designing our site, but we are keeping all of our content in terms of site structure, internal linking etc. the same. Now we were wondering if it would be a SEO best practice for us to change our pages' extension from .aspx to .html and just put a re-direct from the aspx to the html pages. Or should we keep everything as is, and maybe just revise our on-page seo efforts as well as do some more link-building. I just have to note that we are currently ranking very well for top positions and obviously all these pages are already nicely indexed. And then another question I have is with regards to our mobi site of this same website.Our dev team created it using Responsive Web Design, but they decided to implement techniques that show and hide content based on what device you are viewing it on. So when viewing it on your desktop, it will show content as per normal, but when viewing it on a mobile device it will hide this content and show the content formatted for that specific mobile device. So we are obviously sitting with a case of dup content here.Is this technique acceptable, or is there a workaround/different way of implementing this? Thanks In Advance Dave
Web Design | | DavidZA10