I am currently building a webiste for a client whereby I am using CSS for the menu (not javascript). For the rollovers, have a background image that contains the regular state and the rollover.
an example code is: <a id="foo" href="bar.php" ><span>BAR</span></a>
I hide the <span> and use the background image instead.
My Question Is:
Is this form of navigation good for SEO? Is hiding the <span> seen as spam by the search engines. Will search engines even pick up this form of menu??
Please Help
Many/most/(all?) search engines will not understand CSS to the degree that they know you're hiding the <span>. For those, you're fine.
For any that are bright enough to understand your CSS, they'll also understand the reasons why people do that, and will recognise what you're doing. So for those you're fine too.
Many questions like this one boil down to "Are search engines just clever enough to misunderstand what I'm doing?" And the answer is no, because it's not in their interests. As the author of a search engine, you wouldn't add support for noticing CSS-hiding without also adding reliable heuristics to tell the difference between its normal use and its abuse.
You may use text-indent css property for your <li> or <a> element. This way you won't have to hide it via css. So you'd have something like this
<ul>
<li><a id="foobar">foobar</a></li>
</ul>
Then you could have following css:
li a {
display: block;
text-indent: -1000px;
width: 20px;
height: 20px;
background: transparent url('/image/path.png') no-repeat;
}
If you are simply going to hide them using
display: none;
then you will want to check out the question Stack Overflow thinks is most related to yours: Google SEO and hidden elements.
Summary: Google ignores anything it can determine is invisible to humans.
Related
I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
CMS issues preclude me from using tabview, so I've been looking at alternatives to get similar content organization.
I'm not really concerning myself with browser compatibility since this is more of a personal, abstract effort, ergo I've been looking at the <details> tag. Ideally, I'd like to do it without pseudo-classes (I'd like to be able to transfer it to inline CSS for other really stupidly backward CMS reasons). An extension effort of this that I've been puzzling over is the use of <details> as a checkbox alternative for similar reasons (CMS limitations preclude me from using checkbox hacks; believe me, I know how insane this sounds).
But before I dedicate a lot of time to trying to figure this out, is it even possible to 'recreate' the tabview effect with <details> and <summary>?
I think the simple TL;DR answer (if I read your question right) is 'NO'. But...
The longer answer is a resounding 'YES'. <details> and <summary> are semantic elements, so they are basically just divs with a different name - you get no extra functionality with them. However, if you give the details tag a tabindex it would become selectable, and you could then style the show / hide functionality through CSS.
Not being sure how you would want to implement this on your page it's tricky to give a complete answer, but as an example:
In HTML
<details tabindex="0">
Heading
<summary>Interesting factoids...</summary>
</details>
And in the CSS...
summary {
overflow: hidden;
max-height: 0px;
height: auto;
}
details:focus summary {
max-height: unset;
}
This would make the summary 0px in height by default, but would expand it when its parent container is clicked (focused).
You might need to play about with the details a bit for your particular use case, but CSS is the way to go.
I'm attempting to allow our CMS editors the ability to swap out the text used for a page title using only a css override.
<header data-alternate="An Alternate Title">
This Page's Default Title
</header>
Using the :before or :after tag, one could use one of many available alternate titles.
header:before {
content: attr(data-alternate);
display: inline-block;
}
If only we could also say,
header:text {
display: none;
}
Unfortunately, as far as I can tell, there is no good way to hide "This Page's Default Title" in order to replace it with "An Alternate Title". If this were a Sprite, we could use one of the well-worn image replacement techniques like Phark or otherwise. Not so much with text replacement generated by :before, because the :before is also affected by the CSS devices used to hide the default text so that, with Phark, for example, the :before content is also at -9999px.
There are solutions I'm trying to avoid.
Using the Phark method or somesuch to hide the default text and then using absolute positioning on the :before content to put it back at left: 0, top: 0. I want/need to preserve flow if possible.
Wrapping the "Page's Default Title" in a span and just setting it to display: none in the CSS when an alternate title is being used.
i.e.
<header data-alternate="An Alternate Title">
<span class="default">This Page's Default Title</span>
</header>
This works, but a span nested in a header is displeasing.
Is there a way to target a tag's text without also targeting its generated :before/:after content? Is there another way to do this?
I'm not sure if this is exactly what you want, but you could try something like this:
p {
visibility: hidden;
}
p:before {
content: attr(data-alternate);
display: inline-block;
visibility: visible;
}
http://jsfiddle.net/yJKEZ/
You can set the visibility of the p element to be hidden, and then set the visibility of the :before pseudo-element to be visible within it's parent (the p) despite it's setting.
If that doesn't quite work as expected, there isn't really anything tremendously wrong with adding an extra span in, to help the process. It might not be as clean, but it could work better.
I do, however, want to raise the question of why you might need to do this, and point out some concerns with an approach like this...
For starters, pseudo elements are not part of the DOM, so that alternate text can't be selected, and isn't as accessible to the browser (or the user). Screen readers or search engines will see the default text, and not pay any attention to the alternate text, but that's what your user will see... This could lead to some confusion.
While your question specifies that you want to be able to do this with CSS, and while it may be possible, it really isn't the best solution for doing something like this. Especially if your website is being viewed in an older browser which does not support pseudo elements (Now the user sees nothing at all!).
I would more recommend something like this for swapping an image out for alt text in a print stylesheet, or swapping a hyperlink's text for the full address that it links too (again, mainly for a print stylesheet). Changing important content like a heading in this fashion can cause a lot of other issues, especially in terms of accessibility.
Just something for you to consider along with my answer... I hope I've helped you with your problem!
I am using a special link effect on <a> tags with the background-image: CSS. The links look nice but the website also contains a lot of <img> that are links, which also get the CSS.
I am currently solving the issue with jQuery: $("img").parent().css("background", "none");
Is there any correct way of doing this with CSS, getting this CSS not to affect tags.
Code:
a:link ,a:visited {
text-decoration: none;
background-image: url(/underline.png);
background-repeat: repeat-x;
background-position: bottom;
}
CSS4 defines the following syntax:
!a>img {background-image:none}
However, as far as I'm aware no browser supports it yet. It's also not final on where the ! goes, as a!>img and !a!>img all have been suggested.
So, basically, there is no CSS solution for this. However, there is a "hack" solution.
Assuming body {background:white}, you can do this:
a>img {background:white}
This will cover up the link's background with a white one, which essentially hides it. Adjust the colour as needed. Note that this won't work if your content area has a background image...
When I saw this: background-image: url(/underline.png); I got very nervous. Is there some special effect you need to employ here? What's wrong with the underline property in CSS?
To solve this in CSS2 you'll need to redesign your code. Therefore, this might be a bit impractical.
Keep your css code for links.
Then wherever you have a link with an image in there, you should add a class. Use this class to link CSS that overrides the typical behavior.
There is no way to do what you want in current CSS capabilities. Jquery works but it is afterall a hack.
a {
code here that you want
}
a.img {
override properties
}
<!-- Html -->
Normal Text
<a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>
Some food for thought -> The reason CSS does not support what you seek is because a child should not define a parent's style! AFterall, we (as people) do not define our parents' traits but we surely override what we inherited.
What would be the difference in your links ?
Domain, peticular folders, extension name , etc...
I asked cause you could filter them by url.
[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with image/whatever_is_behind_or_not
[href*="image/] will match any url containing image/
[href$=".jpg"] will match any url ending with this .jpg extension
As you can see , there's nowdays lots of option , level4 will make it much easier though :)
Well, unless I am missing something, the solution to this is rather simple.
On a website I worked on I used the following two CSS rules to differentiate between linked text effects and linked image effects:
a:link {
/* rules for linked text effects */
}
a img {
/* rules for linked img effects */
}
In several tutorial I found that, site title and site description is important for SEO. Even some of 'em uses <h2> for site title and <h1> for site description grab Search Engines' attention into the website matters.
<header>
<div id="logo"><img src="images/logo.png" alt="Logo of the Company" title="Company Title"/></div>
<hgroup>
<h2 id="site-title">Site Title</h2>
<h1 id="site-description">Site Description</h1>
</hgroup>
</header>
OPTION I: But in some web pages, we don't see any site title or description, but a site logo. In that case, designers recommend to use a text-indent to hide them.
#site-title,
#site-description{
text-indent: -9999px;
}
It'll hide the texts by indenting 'em from the visible portion, so then the search engine will crawl 'em and it'd be SEO-friendly. But the problem is, they are taking the space in the header section. To meet-up the space we need to put margin to the following items, and that's not a good solution for me.
OPTION II: Beside that, we can use visibility:hidden
#site-title,
#site-description{
visibility: hidden;
}
I don't know whether it enables the crawler to crawl those texts, but the same problem here too, it's taking the place.
OPTION III: But the only thing useful is display: none and it works like a pure HTML commenting (<!-- commented out -->)
#site-title,
#site-description{
display: none;
}
But truly, it simply vanishes the texts, I think even from the eye of the crawler. So, to me, it's not SEO-friendly.
So, Option I and II is useful with the place-taking problem.
How can I put 'em there for SE-Crawler, but invisible from the eye without taking place?
Using CSS clip Property is a nicely clean and non-conflicting solution to this issue.
h1#site-title,
h2#site-description{
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
CSS clip Property
The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.
Browser support:
I don't think display:none vanishes your code from the source. It is still present there and the search engines will still crawl them.
Try to inspect the element (Chrome developer tools or Firebug) or view source of your page and you'll see! CSS never affects the kind of HTML rendered on the page! It just affects the way it looks. So, relax and use the display:none property.
So, here I got the correct answer:
https://webmasters.stackexchange.com/questions/1377/how-bad-is-it-to-use-display-none-in-css
We can use display:none; and search engine will crawl it, so no tension with SEO.
But CAUTION: DO NOT USE display: none; FOR SPAMMING. :)
Thank you #akash4eva.