Does CSS effects SEO?

Does using CSS affect SEO?

The question is very interesting but the answer is more challenging to find correct answer. In today competitive world where every thing is seen carefully effects. This question asked time and time again by Developers and Website Owners. The simple answer is NO but I would say it depends on the CSS rules applied by Developer or Designer that it would help the Search Engine and users for ranking purposes.There are some rules of CSS which would help a little bit in SEO and from many rules some of them are:
With CSS there is no rule of using standard ID and Class, Anyone can use any ID Name or Class name to refer the HTML Tag. So, there would be very difficult for automatic process to see page but the human beings are required and tell this is Important and this not. For looking into important things in the web spiders use HTML H1 to H6 Tags. They have given the perfectness to HTML Heading Tags. So, the process in the automatic mode and with different algorithms the text between Heading Tags are read and given score according to it. Now taking the advantages of CSS one can disable the default setups and make his own rules for font setting and size and positing of the default tag.
<html>
     <head>
          <title>Over riding HTML Tags default rules</title>
     </head>
     <style>
          body, h1, h2, h3, h4, h5, h6{margin:0; padding:0; outline:0; border-spacing:0; font-size:100%; font-weight:normal;}
          h1, h2, h3, h4{font-weight:bold; text-align:center; border:1px solid #000; border-spacing:5px; width:50%;padding:6px;}
          h1{width:150px;height:40px;position:absolute;background-color:yellow;top:20px;left:20px;z-index:0;opacity:0.5;border:1px solid #333333;}
          h2{width:150px;height:40px;position:absolute;background-color:yellow;top:50px;left:70px;z-index:1;opacity:0.5;border:1px solid #333333; color:red;}
          h3{width:160px;height:40px;position:absolute;top:50px;left:200px;z-index:1;opacity:0.5;border:1px solid #333333;}
          h4{width:200px;height:40px;position:absolute;top:78px;left:130px;z-index:3;opacity:0.5;border:1px solid #333333;background-color:red; color:#fff}
    </style>
    <body>
         <h1>Grand father</h1>
         <h2>Father</h2>
         <h4>Son</h4>
        <h3>Mother</h3>
    </body>
</html>
In the above example, we have written the text in order of h1, h2, h4, h3 but with css rule we have changed the position of the tag and you will see that Grand Father is at TOP and Father and Mother in Middle and Son at bottom, we have given the appearances according to our needs and Spider will also given the same importance as per HTML Tags.
According to Google, “Googlebot processes each of the pages it crawls in order to compile a massive index of all the words it sees and their location on each page. In addition, we process information included in key content tags and attributes, such as Title tags and ALT attributes. Googlebot can process many, but not all, content types”. Now two things which they have said is the location of text and tags means HTML Tags. Thus while writing a content page on has written the important content at the bottom but want to know at top then with the CSS help you can change the location of the Text and Google would fetch the text as per HTML Tags and same importance would be given to your content as you have provided.

Tips and Tricks to optimize page with CSS rules

There are many tips and tricks available to optimize the web page but I will provide only important rules which would help every body, are
  1. View without CSS and JavaScript Code: Today design is every thing and many websites and spent thousands to get the best design but on the prospective view they don’t think about SEO. The First trick is turn of CSS and JavaScript Code and take a view of your webpage and you will come to know what is actual position of the text and change the position according to your desire. Main reason is that the spider and crawler are not human beings so they view things without CSS and JavaScript Event.
  2. Organized Code: In SEO, the location of text, size of text and location of the text matter a lot.If your page is significantly long, the content towards the bottom of your page won’t rank as “important” as the stuff at the top. Now another question arises that what would be the length of the page and how to determine length and the rule is length of the page is determined not by the amount of content (i.e, text, images, links, etc.) but by the quantity of code. Now consider that you have nested tables constituting your top navigation and now spider/crawler comes and before it gets to your content, spider or algorithm mark the page as the real guts of your website insignificant content.
  3. CSS Pagination:Long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article. Many developers use solution is CSS pagination and question arose that Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Anyways this way you can divide the content into easily digestible parts while still having it on one page. Presently in HTML5 use section and article tags again and again and try to divide the content into different sections, but don’t use CSS Pagination with hiding text.
  4. Styling with HTML Standard Tags: Dont’ try to create your own HTML Tags and don’t use different types of tags for giving performance according to your choice. Try to think that Spiders are not human being and designing or making content more stylish without using standard tags will make your site less important. Use HTML5 header tag to tell your header, menu to provide the menu content, sidebar and article and section tags. If you are using the HTML4 then it is advises to name your CSS ID or Class with these names, as with algorithms the use of standard names with Tags would also boost the Ranking of your web page.
  5. CSS Sprites:Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now. One simple technique to use reduce page load and the number of requests is the usage of so-called CSS sprites. CSS sprites are basically several small images merged into one big image. Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.
  6. Use ALT Tag with Images: This is very important from SEO point of view as the spiders are not humans and if ALT tag is provided then they would give the preferences to images and also try to assert the resiliency of your content with the ALT tags of the Images used on web page.
  7. Emphasis:Headings aren’t the only things that affect your SEO. Search engines also pay attention to a few other tags when determining what the “important” words on a page are. For example, Google tends to treat words wrapped in and tags as being more significant that their surrounding text. That’s why you’ll sometimes see pages with randomly bold-faced or italicized word strewn about – they’re trying to boost their SEO by helping Google find the keywords they want to focus on. But who’s to say that those keywords need to be visible to everyone? We could always use CSS to ensure that search engines like Google and Yahoo understand which words are important, without having to annoy our readers with our strong-em soup. If we just take some XHTML like this:
    </pre>
    This sentence contains several <strong class="seo">keywords</strong> of <em class="seo">significant importance.
    <pre>
    
    em.seo, strong.seo {font-weight: normal;font-style: normal; }
    

    This CSS will prevent your SEO-purposed strong and em tags from being bold-faced or italicized on the screen. However, search engines will still recognize the significance of those tags.

Advertisements
Tagged , , , , ,

2 thoughts on “Does CSS effects SEO?

  1. superb post! Keep up the awesome work!

Comments are closed.

%d bloggers like this: