Ranking your website and blog is very trending these days. Everyone is searching for good SEO techniques and blog improvement methods to get higher rankings in search engine. This become more in consideration due to strictness of quality maintaining by Google search engine. Continuous coming giant Panda and Penguin updates increase the thirst fire of blogger to think critically about SEO ways to let them survive and maintain their sites.
The table lipstick using old styled websites based on HTML tables are outdated now. Very fewer sites are left with tabled structures. Due to lack of browser support, tables cause problems while CSS is well supported by most of browsers and is upper hand in the race, and is very beneficial in SEO. In this article we have outlined some very useful and interesting about the fact that how CSS aids you in your SEO practices and help you improve your impact. For those who are already familiar with HTML and CSS will get more understandings in comparison with white minds.
The Fact
Be clear about the fact that writing quality content is the key factor for the success of any website not just the SEO practices. What CSS will do in SEO is to make your page structure more convenient for search engines to read and crawl your content and hence will results in better page visibility. The one who’s waiting for miracle should stop now and start building good quality content.
Major CSS benefits of SEO
We see a lot of misleading articles on Internet with a label “CSS to boost SEO” and similar one. In actual below are the major possible benefits of using CSS for SEO.
Making the page lighter and fast loading
The main purpose for using the CSS is to make the pages load faster by minimizing the server requests and images. This increases the website opening speed and make it more efficient for search engines to be crawled. This ultimately results in quick and better indexing of your site’s content.
Using search engines recognized standard tags
There are defined HTML tags for headings <H1>, <H2>,.. Make them more prominent and visible using CSS. Search engines perceive them as the indicator of important content. Avoid using the old fashioned <font> tag for decorating the headings.
Working on Menus to make easily crawl-able
Search engines recognized the <ul> and <li> items as links to other important content of our site, so use these HTML standard elements in making up of menus to help search engines crawl them easily.
Important content first using CSS
This is the old and effective method in times. Using this method one can show important content first on the website using CSS to returns the important paragraph first but not to users. This is not that effective now but in terms of easily crawl-ability.
Best CSS Practices that aids SEO
For WordPress users, many things are done automatically in SEO like if you’re using some good reputed WordPress theme then solves half of the hurdles. Below are some good practices that can help you add more value to your SEO practices.
1- CSS Sprite
CSS sprites are very recommended when we talk about quick page load and faster web-page loading speed. Google page speed emphasis every website developer to use the CSS sprites to minimize the server load and help the web-pages load quicker. Let’s have quicker view on what CSS sprites does mean? CSS sprites the name is little weird and misleading, they are not small images but one large image that contains different smaller images in it. With the help of CSS background position, we can show users specific part of the image. This way we can make hover buttons, images and icons.
Why they are important?
Previously there was a conception that the smaller images will load faster for the users but that approach was wrong. By CSS sprites method, there will be only one HTTP request rather than multiple HTTP-request for each image which increases the response time. Once the main image is loaded completely, then that will be used in all over the website easily.
If you need a complete tutorial on what are CSS sprites, how they work and why they’re cool.
2- External CSS Files
Adding external files help web-pages load faster. When creating the web-pages, the developer have a choice to add in-line styles of to wrap them all in some separate file. The right choice is to go with external CSS files. The same rule applies for JavaScript files.
Importance?
Yeah right ask, they’re really important. First and most important importance is that you don’t have need to write the same CSS code again and again in all over the pages. It saves the developer from scratching the separate web-pages for a single color change. An amazing experiment reveals that the external style sheets load way faster. This can also help you rank well in SEs on content to code ratio.
Another important benefit is that when you reload the pages the external files does not reload. This way the web-page even if reloaded will connect to already opened external CSS file which will boost the opening.
3- Easily Crawl-able Content
Use the standard HTML tags to indicate SEs about the important content of your web-page like <H1> rather than using fancy <font> tag. Further for creating menus and navigation, consider the standard menu tags <ul> and <ol>. and further the <li> and <a> elements to link to the other important pages of your website. The CSS thing is revolving around better crawling option. The content to code ratio (In comparison how much is your code with content in a web-page) should be well managed. SEs consider this a key factor while ranking websites.
The website with outdated HTML code can never be ranked well in the search engines because of less crawl-ability and complex invalid code. The bad and good examples are below.
Bad Example or Old HTML
1 | <bold> |
Optimal and Recommended HTML/CSS
HTML:
1 | <h1 id="myheading"> |
CSS:
1 | #myheading { |
Some bad practice to avoid
CSS can ruins your SEO at the same time if you’re using some spam techniques to cheat the SEs. Search engines have became way more intelligent than minute minds of spammers. Below are some bad practices observed that should be avoided.
1- Using CSS to Hide Text
This is one the technique that SEs treat very angrily. Can also be used for keyword stuffing. Any website that intentionally contain any hidden text to deceive the search engines may be removed from Google index and may not appear in search engines. Using display:none; or margin:-999pxlike commands can hide the text from end users but seen by search engines. Using them will ruin your SEO practice if you’re using them to spam.
2- Using CSS to replace images
Replacing images using CSS is a good way to show good designed image to users while a complete text to search engines. Mostly used in logo and tag-line part of website and blog. Below are a sample way to do so.
1 | <div id="mylogo"> |
And writing some CSS like below
1 | #mylogo { |
Using this technique is fine but this can be abused by stuffing a lot of keywords in the title and tag-line/description. Adding too many keyword will get your site spam and may be blocked by search engines. You must use this feature with good intentions or you will be the only person who will get affected.
Another option is to use the alt tag on all images to let search engines know about the image content.
Summary
CSS is a lovely option which is adopted for creating up-to-date websites which are optimal in size so that load faster and to base on standards. Clean written code not improves your code to content ratio but helps the search engines to crawl your pages with more ease which ultimately results in better rankings. One can separate the HTML content from a lot in in-line code stuffing which makes the code way lighter, cleaner and faster which is purely search engine friendly with losing the design requirements. A very recommended combination!
0 comments:
Post a Comment