Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
I'm just wondering if display:none is affecting my sites seo as I have for certain keywords dropped rank in google over the past few days since implementing this into a new homepage re-design.
I am using wordpress and displaying random post images on the homepage, getting the excerpt and hiding it using display:none and when a user hovers the image it displays the excerpt as a tooltip.
I have read a few conflicting articles on this and watched Matt Cutts youtube video but that doesnt really give me an answer for the way I have implemented it.
So I am hoping someone on here can give me a bit more insight as to whether it is not good seo practice or doesn't make much difference?
Thanks
The Google bot don't care about CSS display:none, what the googlebot see is your html source. whatever is hidden with css is visible on the html source.
There are secondary checks for your CSS files, that check if you have any display: none; on your css If you have there is some sort of checks on what is hidden (links, chunks of keywords, etc.). If you are found to hide keywords or links you will be punished :)
Other common check is the css for your links, things like a {display: none;} or a {color: #ffffff;} will raise a flag. in the last one a check to determinate the background color of body or any container is done.
Matt Cutts will not tell you exactly how it works because it is a huge task that so far had big failures as css sometimes get complicated and you require a lot of checking.
There is just simple red flags on a site if there is a display:none;
As a side note if you have a style block on your html (<style type="text/css"> .some-class {display: none;}</style>) or a div with the style on it (<div style="display:none;">keyword</div>), Googlebot will pick that faster as it is visible on your html source.
You mention that you had implemented this into a new homepage re-design, and I wonder if you had given a time for Google to pick the changes on your site ? Remember that you can make improvements on your site but googlebot will see them 'who knows when'
Although you apply display:none style to your element, it doesn't matter with seo because your element dom still exist and what seo looks for is the dom and its content, not UI.
What i understand from your problem, is that google might black listing your website links. As hidden text/div are considered as Black Hat SEO technique and hurt your website very much.
I don't claim to be an SEO expert, but generally speaking if you're trying to fool the site crawlers (by hiding tons of keywords) that's bad for SEO because you're likely to get blacklisted. If you hide content because it helps user interface, shouldn't be any negative effects. Since it's an automated process, err on the side of caution generally because, for example, if you're blacklisted you can't argue your case for including every city name in the lower half of the state in a hidden div.
Crawlers are apparently not very good with JavaScript (and many users have JS disabled anyways) so perhaps have the content shown by default then hide it with JS/CSS hover.
.keywords
{
visibility:hidden;
}
<div class="keywords">
keyword 1
keyword 2
keyword 3
keyword 4
</div>
or better :
.keywords
{
display:none;
}
<div class="keywords">
keyword 1
keyword 2
keyword 3
keyword 4
</div>
Related
I am writing some CSS that should create some generated content.
.foo:visited::after {
display: inline;
content: " visited";
}
However, it has no effect.
If I change the selector to just .foo::after, it works.
Similarly, my styles for .foo:visited take effect.
The Safari web inspector is even showing my styles for :visited::after as if they are in effect!
Why can’t I see my generated content?
Browsers limit the styles you are allowed to modify on a visited link, and even lie to you if you query for the current color of the link with JavaScript.
Why?
Because otherwise, you, at scumbag-advertising.example.com, can run a bunch of JavaScript to see what websites (or at least URLs) are in the browser’s history!
For more, see :visited on MDN and this longer explanation of how this privacy hole was closed:
Historically, the CSS :visited selector has been a way for sites to query the user's history, by using getComputedStyle() or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity.
A number of years ago, browsers patched up this hole by limiting changes and lying about color.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
How to apply css style to a wordpress article without being administrator?
I've found plenty of information on google, but none that apply to my case because:
I'm not an administrator of the site so changing the theme, the global stylesheet, or hacking the php to allow html style tags is unfortunately not an option.
I only want to change the style of only some articles, so even if I had the authorization I'm not interested in changing the default stylesheet.
Currently, the only solution I've found is using style attributes html tags of interest, but it is error prone and doesn't scale well.
Any suggestion on including css style rules either inline or from an external url?
In my experience, style tags within posts do work (testing in WP 3.5.1 using the text editor).
However, you have to be cunning with the styling to make sure you override the defaults. An easy way to do this is with the important notation:
<style type="text/css" scoped>
* {
color:red!important;
}
</style>
<h1> hello </h1>
All the content of the post ("hello", in this case) appears red.
The use of the scoped attribute means the styles only apply to the blog post, not the whole page.
Are you talking about changing your specific posts that you create only?
If so, I'm guessing you only have access to the posts in question and therefore it would make it very difficult for you to do anything scalable.
You said you can't change the stylesheets or change the default stylesheet but if you could then you could wrap all the articles you want the specific styling on inside their own div with an id name of your choice. This would then automatically change all elements inside post with your div id and would scale across all pages you create without the need of re-defining the rules every time, for example:
<div id="antoines-article">
All your content
</div>
Your only other option is to use inline styles
<div style="background-color: green">All your content</div>
or by adding this before your post content (bare in mind however that this is only allowed by default to Administrator and Editor roles)
<style>
div { background-color: green; }
</style>
The difference here is that the first rule would only change the div it is attached to while the second would change all your divs to green.
This still may not be what you are after but I'm afraid from what you've said you are pretty limited with your options.
In addition using the !important tag after most css definitions will overwrite CSS styles from stylesheets if you find something wont change for you. For example
div { background-color: green !important; }
In addition, you could ask the webmaster of your site to setup specific page templates with different CSS styles loaded which you could then hook onto.
In some articles that I've read, the use of * {margin:0; padding:0;} is discouraged as it would affect the web site's performance. So I turned to a reset.css stylesheet.
But I'm wondering, how does it affect the performance?
The reasoning behind this was discussed in this Eric Meyer post.
This is why so many people zero out
their padding and margins on
everything by way of the universal
selector. That’s a good start, but it
does unfortunately mean that all
elements will have their padding and
margin zeroed, including form elements
like textareas and text inputs. In
some browsers, these styles will be
ignored. In others, there will be no
apparent effect. Still others might
have the look of their inputs altered.
Unfortunately, there’s just no way to
know, and it’s an area where things
are likely to change quite a bit over
the next few years.
So that’s why I don’t want to use the
universal selector, but instead
explicitly list out elements to be
reset. In this way, I don’t have to
worry about munging form elements. (I
really should write about the
weirdnesses inherent in form elements,
but that’s for another day.)
That said, the following chart from this Steve Souders post shows the difference in load times for a test page using universal selectors compared with a page using descendant selectors.
it is effect the performance because the browsers engine have to apply this style to every element on the page this will lead to heavy rendering specially in the big pages with a lot of elements and this method is a bad practice too because it may remove a good default styles for some elements
you may optimize this code by reduce the scope of it like using it on just some elements that make the problems like this
h1,ul
{ margin:0;
padding:0;}
Using *{margin:0;padding:0;} in your stylesheet will not affect performance and is helpful in tackling various formatting issues.
Using a separate reset.css does have some performance issues, as you are forcing the user to requested one more file from the server. In the grand scheme of things, a few kb on a high speed line is nothing. But another file for someone on a mobile browser can be too much.
I think the website you read that on needs its head checked, a reset style sheet is the way to go to level the playing field. The overhead is so marginal it won't make a difference especially with modern browsers.
body {padding:0;margin:0;}
It effects the webpage display because without its use we have to
margin-left:-7px;
margin-top:-7px;
etc. like substitutions to avoid a narrow white strip on the left and top of the webpage.
Sometimes when I see a website I like or sites from respected people, I see the source codes and try to understand them (as we all do).
On Jeremy Keiths site he uses the following code:
[role="navigation"] a {
font-weight: bold;
text-decoration: none; }
I have never seen this before, and a few other times I saw code (which can be considered a "trick") that I had never seen before.
Other than asking what the above code means, my question is - is there any documentation, book or blogs that go through to learn about the advanced/less known CSS "tricks"?
The above targets elements that have a role attribute, such as:
<div role="navigation">
...
</div>
A class would make sense here too, but it's just another way of doing it. Attribute selectors are a standard part of CSS2, but at the time IE6 didn't support them so it hasn't been used much until recently.
There are many other such selectors that have been around for a long time but couldn't be used due to limitations imposed by IE. See Quirksmode for more examples.
That is a CSS attribute selector. It's saying "All <a> tags that are descendents of an element that has an attribute of role with a value of navigation should be styled in the following way ..."
He's using it for accessibility principally, and for styling only secondarily.
If you are looking to learn some of the newest things about CSS, I'd recommend css3.info and css3please.com. The first is a great source of examples of new tricks, and the second one lets you play with the new stuff in the browser. Other than that ... I've found that the best way to learn is to answer questions here (looking things up when you are not sure) combined with reading -- Eric Myers, Paul Irish, Quirksmode -- all of these are good resources for learning things that are new to you.
In this example, the <nav> is wrapped in a <div> and then then assigned a navigation role. The same can be achieved with just
nav a {}
A lot of sites seem to mix a "little" HTML5 with XHTML. I really don't see a reason why they don't use HTML5 "completely". The whole point of HTML5 is to be more semantic and to write less code that's more meaningful.
Some useful links.
http://html5doctor.com/
http://htmldog.com/
http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/
As of now, you'll need a bit of javascript to make HTML5 elements work in IE. These links should help
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
http://remysharp.com/2009/01/07/html5-enabling-script/
Role is a new XHTML2 attribute.
http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/
http://www.w3.org/TR/2008/WD-xhtml-role-20080407/
Cool, which browser did it work in?
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
E[foo="bar"]
an E element whose "foo" attribute value is exactly equal to "bar"
When content is hidden by CSS (display:none), is that read by Search engines or are sites penalised for that ? In my case, due to some CMS and other reasons, I need to serve alternative content to users and hide the H1 tag on the page using display:none. I wanted to know if the Search Engine will still treat the H1 tag with the same prominence as when its not hidden.
It's against Google's policy. It's called keyword stuffing and will get you delisted from Google, which means your site wont even show up on Google anymore. A good rule of thumb is to only show googlebot what users of your site can perceive display.
If you show the information to people at some point, then you can argue you're not keyword stuffing I guess, but Google will delist you first and then you'll have to file an appeal.
I don't believe that Google will penalize you automatically (meaning without human review), but it's definitely a risk, especially if the hidden text appears to be that way solely for SEO purposes.
Google Quality Guidelines - Hidden text and links
Search engine builders have had about 15 years to learn every trick that people use to get better search engine ratings, so you can be sure that the robots notice something simple like hidden text.
If the header tag is not visible on the page, it's pointless to have it there at all. At best the search engines will ignore the tag. At worst they will ignore your site.
Search engines are getting wise with regard to CSS techniques to hide information in attempts to game them. There is likely to be a threshold however, so one or two such techniques, for valid enough reasons won't be too problematic for you. If you can, do try to avoid them, and especially en-mass.
There is no reason why you can't hide the H1 tag - it's not necessarily a bad thing. Vision impaired people who are reading your website with a screen reader would find the hidden H1 useful regardless if it's hidden (because most screen readers read the HTML not the visual page). Also if you visually have a business logo on the page and then have a hidden H1 with the business name, this is also fine. In this case the H1 is an alternative to the Logo so it is therefore fine for purely semantic reasons.
Also you can have hidden content that can 'appear' by user interaction (say clicking on a 'more' link). This is also fine. Hiding text is not wrong providing there is a good, usability reason for doing it. Of course keyword stuffing is wrong and this should never be done - so an SEO reason is never enough alone to hide text - there must be some other reason.
As already mentioned, it is not a good idea to hide information for many purposes.
If actually, what you really want is to serve visitors an alternate media than plain text, there are a lot of ways to do that, just see Nine Techniques for CSS Image Replacement for further details, or sIFR.
You're better off not doing this.
Search Engines like Google are smart and they check for this type of thing and when you're caught, you'll get flagged and your SEO is useless.
Work within the system, don't try to cheat it. Google offers a ton of tools for developers looking to do legitimate SEO.
Its not a discussion about that search engine should consider it or not.
Its a question about what search engine will do. Here is your answer
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
Search engine will discard it, and also its against their terms of use so they have right to even remove your site from search result.
Using a .visuallyhidden class might be a better idea than the good old display:none; Screen readers will read the content in .visuallyhidden as if it were plain text.
.visuallyhidden {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I'm not sure if Google penalizes the use of such classes in h1 tags. But in any case I think it is a better option than using display: none;
you can set the background to the as the image you want people to see and then text indent the text to -9999px.