Combining CSS, JavaScript, and HTML with SEO
There is more to search engine optimization (SEO) that just keywords. Unfortunately search engine optimization is often an after-thought once a website has been created. It is much more difficult to optimize a poorly coded website for search engine optimization than to start with proper planning. Many search marketing companies will perform on-page and off-page search engine optimization, but few will go the extra mile to make sure that the CSS, JavaScript, and HTML are correctly optimized. This may be the difference between beating your competitor in search engine placement results (SERP) listings that could translate into greatly increased profits. Taking the time to optimize your site’s code will help in several areas including the speed that your website loads, the readability of your site to search engine crawlers, and increased cross-browser compatibility. Keeping SEO in mind while coding can be difficult since most web programmers and designers are not also SEO experts. Establishing communication between these two disciplines can be a fine line to walk, but after reading this article, making the synergy of between SEO and coding should be clear.
Using CSS with SEO
Cascading Style Sheets (CSS) are extremely helpful in creating a uniform look to your website. CSS also makes coding more simple and drastically reduces the size of the code behind your website. When coding with CSS it is important to incorporate the principles of SEO in order to make your website fully effective in the search engine race for top placement. There are many areas of CSS that give golden opportunities for optimization that are regularly overlooked by the average programmer.
• Moving Important Content
The biggest advantage of CSS is the ability to move important content to the top of the coded page. The actual text may not be positioned at the top of the page, but CSS lets the search engine spiders read that text first since spiders read each line of code sequentially when indexing. No one knows the exact algorithm that Google or other popular search engines use for indexing or how much information is actually indexed. However, it can be assumed that the first few paragraphs of information that are on your page are most likely treated with higher priority than the rest of the text. Formatting, of course, with proper header tags and other tagging methods is very crucial in calling attention to the most important parts of your content.
• Making Pages “Lighter” in Weight
Google has currently indexed over 3 billion pages so they really don’t need the extra work of sifting through a couple hundred lines of code before the information that you would like to be indexed is found. CSS helps greatly with this by cutting the bloat from messy website code. Instead of having to define how each element of your website looks on one page of text code, a concise CSS include file can be used so that basic tags can be used to define each style. Doing this properly will optimize your page for loading speed as well as search engine readability.
• Avoid Grey Hat and Black Hat CSS
If CSS is used to make white text on a white background including blocked of keyword-stuffed text, you can expect for your site to disappear from search engine rankings with haste. If CSS code hides text or an element of the page on coordinates -5000 where it can’t be seen, this affects the website’s accessibility and is a big red flag on the search engine’s black hat radar. It is always best to avoid spamming search engines or trying to get away with overly using keywords in your website.
Using JavaScript with SEO
Most JavaScript programmers do not do anything with search engine optimization since search engines primarily do not read JavaScript. Don’t interpret this as meaning that JavaScript is bad. On the contrary, JavaScript is very useful for adding powerful functionality to your website as opposed to using Flash which is also fairly invisible to search engines and is incompatible with many mobile devices. Even so if JavaScript is sloppily written it can be detrimental to the optimization of a website.
• Location of JavaScript Codes
The most important thing to know about optimizing JavaScript is where the code resides on your site. JavaScript should always be placed in a .js file and used as an include file in your code if possible. For small scripts, it is acceptable if they are only a few lines of code. When a search engine spider reaches a ‘script’ tag, it will jump right over it and ignore the following text until it finds the corresponding ‘/script’ tag. However, if all of the JavaScript is contained on the coded page itself, it will take search engine spiders that much longer to crawl through the page until it finds the content that you would like indexed.
• Save Bandwidth with Included Files
A good practice is to cache the .js and .css files on your website. This is a great way to make pages load faster and it saves bandwidth on your server. Cached and non-cached paged loading speed is actually a factor when it comes to your website’s SERP rank and should be taken seriously. This is also a factor when displaying your page on mobile devices that may not have fast internet connections or in some cases high processor speeds.
Using HTML with SEO
HTML is by far the biggest area of opportunity when it comes to search engine optimization. Since search engines are able to read every bit of an HTML document, the canvas for painting an SEO masterpiece is primed for action. It is easy to overlook small opportunities for proper keywords in HTML especially if common HTML editors are used for building the website and may not prompt for proper tagging. It is important to realize that every element of your website works together to present a collective keyword presence to search engine spiders. Naming conventions are crucial to making your site completely optimized.
• Title and Meta Tags
Undoubtedly, this is the oldest of the SEO techniques but still as necessary as ever. Some SEO specialists claim that Meta tag information is no longer as important as it used to be. This may be the case since search engines look at many more elements of the site than before, however, they are still of great importance and should not be overlooked. Don’t stop with just the meta description and meta keywords either. There is a full pallet of meta information that can be used to clearly define the location, language, and purpose of your website.
• Keywords in other Tags
Every tag in your website is fair game for keyword optimization. Naming tables effectively can tell search engines what is in them. Making sure descriptive ALT and Title tags on images will help define your website’s content and also move images up in image directory searches. Using Anchor tags correctly will assist in proper site navigation and let search engines know how elements of your site are related.
• Content is King
Keeping focus on each page is key. It can never be said enough that “content is king.” Instead of focusing every page of your website on the same keyword phrases, make sure that each page is themed to be optimized for the primary content that is on the page. By avoiding distracting content on the page or unrelated text, your page will present a much more streamlined keyword cloud that will be sure to bring higher search engine rankings.
• W3C Validation
Validating your code is very important. Making sure that your website is fully accessible is a big “thumbs up” in your corner when it comes to search engine visibility. If you can ensure that your site is W3C compliant, you can rest assured that errors in your code will not affect your search engine placement results.
This article was written by Anthony Benedict. Anthony helps to run and maintain inetzeal.com. This website is an entity of an Internet marketing company which provides many services, which includes a white label link building service, as well as many other white label SEO services.









Facebook
LinkedIn
Twitter
RSS
Really good solid information here, thanks, it has been most help-full.
I’m looking at using JavaScript to call seperate, div elements on to the page, different info presented when users hover over a individual nav element. it doesn’t make sense to have them on seperate pages as the info is only a paragraph long for each nav, however when all the html is read by the search engines, it will be a substantial bit of content with lots of good keyword rich text,
I was just searching for effects of coding it in as document.write in the JS but since its still a grey area with search engines reading JS, may be best to hide, unhide the info as the bulk of text for SEO will be here.
The only thing will be for those who disable JS..
thanks
Rich