benefits of using CSS<\/a> by now \u2013 being able to centrally locate all of our presentation, the ability to replicate design changes instantly over an entire website, and so on. But not everyone is sold on such details. These days, a lot of people are more interested in SEO (Search Engine Optimization, or making your pages look good in search engines) than anything else. So what happens if you have a client or an employer whose mantra is more along the lines of, \u201cSEO at any cost, CSS be damned\u201d?<\/p>\nWell, I have some good news for you! Using CSS (and its trusty sidekick, XHTML) is actually very beneficial to your SEO standings. Below, I\u2019ve outlined four different ways that using CSS can help you improve your search engine optimization. Some of them happen automatically, while others require you make decisions.<\/p>\n
Streamlined XHTML<\/h3>\n
In the world of SEO, size and location matter. 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. And here\u2019s the important part \u2013 the “length” of the page is determined not by the amount of content (text, etc), but by the quantity of code. If Google has to read through a few hundred lines of nested tables constituting your top navigation before it ever gets to your content, then you\u2019re running the risk of the search engines considering the real guts of your website insignificant.<\/p>\n
Organized Code<\/h3>\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/organized.gif\" "\\"simple")
<\/p>\n
Sure, your table-based design might look just fine and dandy on the screen, but when it comes to search engine optimization, it\u2019s what\u2019s underneath that really counts. Search engines don\u2019t scan your page visually… they piece together a \u201cpicture\u201d of your site based on the code. And you may discover that your table-based design doesn\u2019t \u201cread\u201d quite the way you expected. <\/p>\n
Take the image above, for example. A search engine would read this page just like any other table: from top left to bottom right. It would read everything in the header, everything in the navigation, and everything in the sidebar before it gets to the content.<\/em> And if your navigation and sidebar are the same on every page, you\u2019re going to take a negative hit in search engines for having a lot of duplicate content up front.<\/p>\n![\"An](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/organized-2.jpg\" "\\"\"My")
<\/p>\n
Luckily, when you\u2019re working with CSS, you can organize your code any which way you choose. You can make sure your valuable, keyword-rich content is right up near the top of your XHTML, and push your sidebar into a div down below your content area. Your CSS can put your sidebar anywhere you want or need visually… and it won\u2019t change Google\u2019s reading of your website one iota.<\/p>\n
Headings Make a Difference<\/h3>\n
![\"Headings](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/headings.jpg\" "\\"Image")
<\/p>\n
As mentioned previously, when you\u2019re worried about SEO, you should be worried about your code. It\u2019s what\u2019s underneath that counts when it\u2019s a search engine browsing your page \u2013 the visuals matter not a whit. To that end, make sure you\u2019re using good, old-fashioned heading tags (<h1> – <h6>) for all of your documents headings instead of just styling paragraphs or some other element with *shudder* font tags, or even CSS.<\/p>\n
You don\u2019t like how the third-level heading looks just above your article? Well, Google thinks it looks delicious, so maybe you should reconsider. Just whip out your mad CSS skills and style that heading to look like… well, like whatever you want! Google doesn\u2019t mind if your headings are 30-points tall and fuchsia (even if your other readers do).<\/p>\n
Choose Your Emphasis<\/h3>\n
![\"Emphasized](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/emphasis.jpg\" "\\"\"Pepper\"")
<\/p>\n
Headings aren\u2019t the only things that affect your SEO. Search engines also pay attention to a few other tags when determining what the \u201cimportant\u201d words on a page are. For example, Google tends to treat words wrapped in <strong> and <em> tags as being more significant that their surrounding text. That\u2019s why you\u2019ll sometimes see pages with randomly bold-faced or italicized word strewn about \u2013 they\u2019re trying to boost their SEO by helping Google find the keywords they want to focus on.<\/p>\n
But who\u2019s to say that those keywords need to be visible to everyone?<\/em> 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:<\/p>\n<p>This sentence contains several \n<strong>keywords<\/strong> of \n<em>significant importance<\/em>.<\/pre>\nAppend it with a new \u201cSEO\u201d CSS class:<\/p>\n
<p>This sentence contains several \n<strong class="seo">keywords<\/strong> of \n<em class="seo">significant importance<\/em>.<\/pre>\nAnd then write a simple CSS rule like this:<\/p>\n
em.seo, strong.seo {\n\tfont-weight: normal;\n\tfont-style: normal; }<\/pre>\nThis 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.<\/p>\n
CSS and SEO, living together in perfect harmony. Who says you can\u2019t have your cake and eat it too?<\/p>\n
![\"\\"All](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/streamlined.jpg\" "\\"\"All")
<\/p>\n