so I have a website that requires the user to verify its age before they can see any information, I display the option to select if you are older than 18 years old with a DIV:
<div class="ct-preloader">
<div class="contenido-edad">
<div class="ct-mediaSection-inner ct-u-paddingTop100">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h4 class="text-center"><small>VNO es una aplicación para mayores de edad, al entrar aceptas nuestros términos y condiciones.</small></h4>
<h2 class="text-center ct-u-marginTop0"><small class="text-uppercase ct-u-cabin ct-u-ls-10 ct-u-ls--xs0">¿Eres mayor de edad? (+18)</small></h2>
<div class="text-center">
<span> Sí </span>
<span> No </span><br><br><br>
<input type="checkbox" name="vehicle" value="si" id="recordarPreferencia"> ¿Recordar preferencia?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I make it apear in the whole webpage with this CSS:
.ct-preloader {
position: fixed;
z-index: 99998;
width: 100vw;
height: 100vh;
background: #fff;
overflow: hidden;
}
the problem is that I think this is making my ranking on Google go down, because that is what the Google bot sees, so I would like to know if there is a way to hide this whole div from Google and other bots, the website I'm talking about is https://vno.mx
The best way to suggest that a webcrawler not access content on your site is to create a robots.txt file. See http://robotstxt.org. There is no way to tell a robot to not access one part of a page
http://code.google.com/web/controlcrawlindex/docs/faq.html#h22
If you are going to use CSS remember that robots can still read CSS files! You could include the CSS file in the robots.txt file, though to exclude it.
If you really must have indexed and non-indexed content on the same page, maybe you should use frames and have the non-indexed frame listed in the robots.txt file as not to be indexed.
Well behaved crawlers will follow the robots.txt guidance, e.g. Google, but naughty ones will not. So, there is no guarantee.
Related
I dont really know whats the reason behind it but when i use some typed text by keyboard, it is fully responsive as it should be, but when i use $post->description it ignores the columns and rows and its going away from the desktop.
Here you can see how the normal text is responsive:
<div class="row" style="max-width: 100vw">
<div class="col-md-12">
Here at L2 Arena, we have the flawless Arena Sets/Shields/Masks and Icarus Weapons.
We believe that customized and balanced equipment make the game more exciting.
We also have a vote system so we can rank higher and bring more people to have more fun.
If the players are voting for L2 Arena, they will be rewarded with vote items.
And we plan to keep our server simple, balanced and without wipes for as long as we can.
</div>
</div>
While when i want to show the post description its like this:
<div class="row" style="max-width: 100vw">
<div class="col-md-12">
{{$post->description}}
</div>
</div>
It doesnt shrink as it should be and im wondering why and how to fix this.
EDIT: Thanks to a comment, this fixed it:
<div class="row" style="max-width: 100vw">
<div class="col-md-12" style="word-wrap: break-word;">
{{$post->description}}
</div>
</div>
Your string does not have space .
use word-wrap: break-word;
to break lines in case that space does not exist in long string
Check that appears with dd() el cual es equivalente a var_dump() de php en Laravel.
dd($post->description);
And tell me what appears to you.
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
It's my understanding that classes should be used for elements that will appear throughout a website, whereas IDs should be for truly unique elements.
I have a website built on a mapping platform. There is a div on the home page #map which is really front n centre of the whole website. So I played around with and edited the CSS till I was happy with how it looked on the home page.
But, when someone adds content (called a report), the report view also uses this same div with id map.
Is it possible to manipulate divs of the same ID differently? The map on the home page is 700px whereas the one on the report pages should be about 300px.
The map html on the home page is:
<div class="map " id="map"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
<!-- / map --><div class="slider-holder">
<form action="https://example.com/main" method="get">
<input type="hidden" value="0" name="currentCat" id="currentCat"/>
<fieldset>
<label for="startDate">From:</label>
<select name="startDate" id="startDate"><optgroup label="2013"><option value="1375329600" selected="selected" >Aug 2013</option><option value="1378008000">Sep 2013</option><option value="1380600000">Oct 2013</option></optgroup></select>
<label for="endDate">to:</label>
<select name="endDate" id="endDate"><optgroup label="2013"><option value="1378007999">Aug 2013</option><option value="1380599999">Sep 2013</option><option value="1383278399" selected="selected" >Oct 2013</option></optgroup></select>
</fieldset>
</form>
</div>
And the html surrounding the map on the report pages is:
<div id="report-map" class="report-map">
<div class="map-holder" id="map"></div>
<ul class="map-toggles">
<li>Smaller map</li>
<li style="display:block;">Wider map</li>
<li>Taller map</li>
<li>Shorter Map</li>
</ul>
<div style="clear:both"></div>
</div>
</div>
I tried using the selector
#report-map, .report-map {width: 300px;} to override but with no success.
Can anyone see how I could do this? I need the main map on the home page to remain 700px and the map on the report pages to be 300px.
The site is here if anyone wants a peek: http://tinyurl.com/c8djrvr
An element ID only needs to be unique within one page. If you have the same ID on different pages, you're not doing anything wrong as long as each page has exactly one element with that ID, no matter which element that may be.
To select #map only when it occurs within #report-map, simply use:
#report-map #map { width: 300px; }
I have a div that contains an image and some text, and has a background-color. However, when it renders on chrome and firefox, the background-color is out of position and the div content is in the correct position, but it works fine in IE8, I just can't fathom what might be causing this, it's a royal pain there I tell u...
<div style="width:800px;margin-left:auto;margin-right:auto;background-color:yellow;">
<div style="height:30px;">
</div>
<div style="width:400px;height:150px;">
<div style="float:left;padding:none;padding-top:40px;padding-left:30px;">
<img src="warning.jpg" style="float:left;"/>
</div>
<div style="width:300px;float:left;padding-left:10px;padding-right:10px;">
<h6 style="font-family:Palatino Linotype;font-size:12px;">
Do not give your personal information to anyone you have not met over the internet or phone, or send money to anyone without verifying what you are paying for. lokalboard.com will not be responsible for any loss on third party transactions made between its users.
</h6>
</div>
</div>
</div>
I am using microformat for the first time.
So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.
This is the existing code that was present on the page:
<div class="evD mr10">
<div class="imgH fl"><img /></div>
<div class="infAr">
<h3>EVENT NAME</h3>
<h4><span>at</span>VENUE NAME</h4>
<p>Event Description</p>
<a class="tdd" href="#">Genre</a>
</div>
<div class="dth">
<div class="sfrD fl">
</div>
<div class="strE sn fl">
</div>
<div class="Buy">
<a class="bkT" href="buy_link"></a>
</div>
</div>
</div>
The Changes I made include :
Change the doctype to html5, and added microformat classes.
<div class="vevent evD mr10">
<div class="imgH fl"><img class="photo" /></div>
<div class="infAr">
<h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
<h4 class="location"><span>at</span>VENUE NAME</h4>
<p class="description">Event Description</p>
Genre
</div>
<div class="dth">
<div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
<div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
<div class="Buy tickets">
<a class="bkT offerurl" href="buy_link"></a>
</div>
</div>
</div>
I have the following questions/doubts :
Is it ok to have existing classes alongwith the microformat tags as done above?
As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank.
How do I counter from a search engine reading as blank.
Thank you.
(Sorry about the question being so long)
1) that is no problem. You can even combine multiple types of semantic markup on the same tags.
2) 3)
If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.
You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.