2

On my side, I use bootstrap modals (aka dialogs / overlays) with remote content to display the detail view of some things (for example for detail view of user reviews/comments).

The code looks like this:

<a data-toggle="modal" href="/detail-12.html" data-target="#myModal">Detail of this comment 12</a>

Basically, when a user clicks on the link, bootstrap loads the content of the href and inserts it as an overlay to the page. Google and other SE follow the link, because its a normal link for them and they index the page.

The problem:

Since I only load the modal content (basically without <html><head>...etc.) without any site structure like header, navigation or sidebar, I have a useless page indexed.

Since the aim of my question, wasn't clear enought, I had to change the question a little bit:

At the moment, a normal user clicks on the link and sees a modal with the content "<h1>Detail of Product 12</h1>". Thats fine and what I want!

A non JavaScript User or Google Crawler would follow the link to /deatil-12.html and see a white, unstyled page without any navigation or footer, just with the content "<h1>Detail of Product 12</h1>". This ugly page would be indexed by google. Thats bad, since if a user enters this page, he sees an ugly page and has no chance to reach other pages (since lack of navigation urls).

What I want

I want, that a normal User sees the content inside a modal (like know). And a non JS User (incl. Google) sees the content inside my normal page structure "<html><head>...</head><body><nav>My cool navigation</nav><h1>Detail 12</h1><p>Some content...</p><footer>My cool footer</footer></body></html>".

I know, how to reach this technically (by adding a param on-click to the url. If this param is set, I will return the modal content only. If this param is not set (No JS = No Click-Event), I will return the complete HTML page including header, footer, navi, etc

My question

Will Google punish me for that or is it OK for Google?

Improve this question
4
  • How would you tell that a browser is JavaScript enabled? Would JavaScript actively remove the header and footer before displaying the dialog? Would you have JavaScript set a cookie that is then used server side?
    – Stephen Ostermiller ♦
    Jan 26, 2015 at 18:15
  • I would just add a param on click to the url (for example /detail-12.html?modal=1). If this param is set, I will return the modal content only. If this param is not set (No Click-Event; Google Crawler and NoJS), I will return the complete HTML page including header, footer, navi, etc. Why?
    – leftjustified
    Jan 26, 2015 at 23:45
  • Adding a parameter creates a new URL and new "page" as far as Google is concerned. If you add the parameter, then Google will crawl both.
    – Stephen Ostermiller ♦
    Jan 27, 2015 at 0:50
  • And how should google know that? If I add it by JS, its not in the href.
    – leftjustified
    Jan 27, 2015 at 9:06

2 Answers 2

Reset to default
1

rel="nofollow" is the best & recommended way to stop any search engine from indexing any particular page.

Hence use it as

<a rel="nofollow" data-toggle="modal" href="/detail-12.html" data-target="#myModal">Detail of this comment 12</a>
Improve this answer
1
  • I have updated my question to clearify, what I want
    – leftjustified
    Jan 27, 2015 at 10:08
0

There are several tools that you could use to prevent Googlebot from crawling and indexing the content.

robots.txt

You could list all the files as disallowed in a robots.txt file. Then Google would not crawl them and would be very unlikely to index them. Your robots.txt file might look like:

User-agent: *
Disallow: /detail-12.html
Disallow: /detail-13.html
Disallow: /detail-14.html

If they all started with "detail" you could disallow them with just one "Disallow" line:

User-agent: *
Disallow: /detail

Alternately, you could move them into a single "dialogs" directory and disallow that:

User-agent: *
Disallow: /dialogs/

meta robots noindex tags

Another trick is to put a meta tag in each page that instructs Google and other search engines not to index that page. The <head> section of each dialog page could include this snippet:

<meta name="robots" content="noindex">

Crawlable content

If you actually want this content in these dialogs ranked, I think your approach might be valid. Include <a href="/detail-12.html"> in your page source but when your dialog opens, put a parameter on it that prevents your server from adding the header and footer.

It is still possible that Google would figure out the the URL with the parameter. Googlebot can execute some JavaScript now, and the Google toolbar sends info to Google about the URLs that users actually visit.

To prevent this duplicate content problem, add a link rel canonical tag to the head section of the page without the header and footer that points to the page with the header and footer:

<link rel="canonical" href="http://example.com/detail-12.html">
Improve this answer
5
  • I know, that I can prevent Google from crawling (I mentioned the nofollow). But I don't want to lose the content of detail-1.html. Thats why I am asking, if the third option would harm my ranking.
    – leftjustified
    Jan 27, 2015 at 9:08
  • what do you mean by "don't want to lose the content"? please clarify.
    – Shreyo Gi
    Jan 27, 2015 at 9:32
  • I think that he means that he would like to have the content ranking in search engines and doesn't want to block it.
    – Stephen Ostermiller ♦
    Jan 27, 2015 at 9:49
  • Ok. I mean, that Google index the content, but not as an snippet (modal content), but as a complete html page (with header, footer, etc.). At the moment, google index for example "<h1>Detail of Product 12</h1>", but i want, that google index "<html><head>..</head><body>..<h1>Detail of Product 12</h1>...</body></html>". I know, how to technical solve that, but my question is, if Google will punish me for that?
    – leftjustified
    Jan 27, 2015 at 9:50
  • At the moment, a normal user clicks on the link and sees a modal with the content "<h1>Detail of Product 12</h1>". A non JavaScript User or Google would see a white, unstyled page without a navigation or footer with the content "<h1>Detail of Product 12</h1>". With my solution, a non JS user and Goolge would see a styled page with header/footer/navigation with the content "<h1>Detail of Product 12</h1>"
    – leftjustified
    Jan 27, 2015 at 9:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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