In so many tutorials and videos I have seen everyone mentioning about the importance of site title and site description. In some cases they even use <h2> for site title and <h1> for site description .
<header>
<div id="logo"><a href="#"><img src="images/logo.png" alt="Logo of the Company" title="Company Title"/></a></div>
<hgroup>
<h2 id="site-title">Site Title</h2>
<h1 id="site-description">Site Description</h1>
</hgroup>
</header>
OPTION 1 : In some webpages we are not able to see title or description instead there will be a logo . In this case they use text-indent to hide them
#site-title,
#site-description{
text-indent: -9999px;
}
but there is a disadvantage in this they take-up the space in the header and to compensate this we need to put some margin on the following items
OPTION 2 : instead of the text-indent we can use "visibility:hidden"
#site-title,
#site-description{
visibility: hidden;
}
but the same problem arises in this case too
OPTION 3 : display: none
#site-title,
#site-description{
display: none;
}
here the text vanishes and doesn't take-up any space but it also vanishes for the crawler making this method not seo friendly
How can I put them there for SE-Crawler, but invisible from the eye without taking place?