1

My page has a set up as below. As you can see it follows a simple structure but there are a number of elements of body text related to the various links.
These text elements appear on the page using a JavaScript hover event as the trigger.
The downside of this is all that text is diluting the relevant/focused content of the page.

<h1>My Page Title</h1>
<p>My main body text optimised for SEO etc....</p>

<div id="sub-elements">
    <a href="/1.html">Link to Element 1</a>
    <p id="element-1-text">This text is hidden but displays when I hover over the "Element 1" link.</p>

    <a href="/2.html">Link to Element 2</a>
    <p id="element-2-text">This text is hidden but displays when I hover over the "Element 2" link.</p>

    <a href="/3.html">Link to Element 3</a>
    <p id="element-3-text">This text is hidden but displays when I hover over the "Element 3" link.</p>
</div>

I want the links to the sub-pages 1.html, 2.html and 3.html to be picked up by Google but I don't want their respective <p> tags to be treated as the main content of the page.

What would be the best practice in this scenario?

I'm wondering if it would be a good idea to wrap said <p> tags in <aside> tags on the chance that Google will recognise this and treat the text not directly applicable to the main body of the page.

  • Just a thought. I'm a little out of touch with some of these things lately, but what if you "inject" those <p> tags using JavaScript so that when Google does crawl your site, that content will not be indexed at all because Google Bot can't hover over links (and because the text isn't even visible in the HTML source)? But then you'll need a fallback for those browsers that don't have JavaScript enabled. What about CSS then? You could have an empty <p> tag and using CSS (on mouse hover) change the content of the tag? – NDEIGU Apr 15 '15 at 9:08
  • 1
    Yea, that was a thought but Google are starting to parse ajax/javascript a lot more now aren't they. Also, it's extra server overhead for me (the text is dynamic) albeit not a great deal...I'm just trying to be as clean as possible I suppose! :-) The CSS option could be a goer. I think I'm also curious about the <aside> tag too. – scgough Apr 15 '15 at 9:10
  • Yeah, I understand that. I'm pretty annoyed with Google these days. I don't like them being able to see my JavaScript code. Oh but can't we use *.js files in our robots.txt file? So basically, can we say "don't index these .js files"? But then again, there's nothing that's forcing them to even follow the robots.txt files. Hmmm... AHAH! I think I have found something: antezeta.com/news/avoid-search-engine-indexing - scroll down until you see the heading, "Partially Stop Page Content from appearing in Search Engines" It goes on to explain how you can prevent certain sections of a – NDEIGU Apr 15 '15 at 9:15
  • 1
    Hmm..a good article but that tag seems to be Yahoo only. Google is the key engine in this case – scgough Apr 15 '15 at 9:19
  • 1
    My initial thought was along the same lines as SE505, except have the text in the title attribute of the anchor (works for non JS users) and if you need extra styling then construct the "tooltip" (ie. create the p) only onmouseover (not when the page loads). Since you are using the onmouseover event anyway, this shouldn't be too much of a change to the code. – MrWhite Apr 15 '15 at 10:28
0

I mentioned this in comments earlier, but I think it is a reasonable solution and a better way to mark up the content...

Instead of having the p element (containing the tooltip) hardcoded in the HTML following the anchor, simply include this text in the anchors title attribute. This attribute is, after all, intended for this purpose... to provide the user additional information about the link and is naturally shown as a simple tooltip. The text is taken out of the main content of the page and is unlikely to influence searches for the page itself. It is intrinsically associated with the anchor, is more accessible and works for non-JS users.

For example:

<a href="/1.html" title="Additional help text for this link">Link to Element 1</a>

If you need extra styling then construct the "tooltip" (ie. create the p element) in the onmouseover event (not when the page loads) that copies the text from the title attribute (progressive enhancement). Since you are presumably using the onmouseover event anyway (to show the existing p element), this shouldn't be too much of a change to the code.

Just to answer your initial question... I don't think an aside element would be appropriate here (semantically). It is still part of the page content so would still be picked up by Google, with respect to the current page, whether it "understood" it or not.

  • 1
    Thanks w3d. This is a good answer but in my effort to get 'to the point' on my initial question, I didn't include the fact that I am already using the title (and in fact a JS tooltip plugin) on each of the a elements. The text in the p elements are in addition to this. Based on your answer though, I can use a data-info attribute to store this p text and work out a graceful noscript solution too. – scgough Apr 16 '15 at 14:17
  • Just to clear this up. In the end I have used a data attribute to hold the text and I deliver it to the 'div' via JavaScript. Hopefully this will do the trick! – scgough Apr 23 '15 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.