: URLs for dialogs from Bootstrap modals popups are getting indexed in search engines, but without nav they aren't good landing pages On my side, I use bootstrap modals (aka dialogs / overlays)
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?
More posts by @Jessie594
2 Comments
Sorted by latest first Latest Oldest Best
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>
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">
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.