Cascading Style Sheets (CSS) and SEO

Cascading Style Sheets (CSS) and SEO

For most of the early history of Google, it was assumed that Google was not able to read CSS files, and hence could not understand the location of content on a web page. However, Google worked for years to improve its capabilities in this area, and this culminated in this post on the Google Webmaster Central Blog on October 27, 2014, advising webmasters to not block access to CSS and Javascript files.
This means that past SEO practices that relied on CSS to disguise page layout with code placement and CSS will no longer work. If you don’t know what this is, don’t worry about it, you would have to do something very deliberate (and gray or black hat) to make use of this.
A more recent change is in how Google treats dropdown boxes. It used to be that Google would de-prioritize or even ignore  content that required users to click on something to expose the content.
However, with their announced intent to move to a mobile-first index, they have rethought this position. At the Next10x conference on April 5, 2017, Gary Illyes reiterated Google’s intent to treat that differently going forward. In mobile environments, good UX design may dictate showing only the beginning of content and allowing users to expand the content to see more, only if the desire to do so.
The primary benefits of CSS for SEO today are:

1. Making pages more lightweight so that pages load faster
2. Organizing your page better to make it easier to write semantically rich content

How CSS is Used to Organize Page Content

“You can write semantically meaningful, clean, light-weight HTML code that is physically organized in the best possible way for crawling and indexing by a search engine. At the same time, you can apply all the styling and visual layout you want to attain your web design goals. This is a powerful combination of benefits, indeed.”

Cascading Style Sheets (CSS) are widely recognized for their contributions to building fast-loading, standards-compliant, easily modifiable web pages. In addition to these well-known capabilities, CSS can provide some compelling SEO/SEM benefits. These include:

• Making pages “lighter” in weight, and decreasing the code-to-content ratio. Done properly, this can make your entire site easier and more efficient to crawl, leading to more and better indexing of your site’s content.
• Using standard HTML tags, such as <h1>, which search engines recognize as indicators of important content, instead of fancy <font> tags
• Using standard HTML tags, such as <ul> and <a> to construct menus that contain standard HTML links to other important areas of your site. This makes these links easily discoverable by search engines, helping ensure more efficient and deeper crawling of your site.
• Moving important content to the top of the HTML file. In the past, this was the single most important benefit that CSS could bring to SEO, but that is no longer the case. Placement of the content high in the HTML used to potentially affect the importance that search engines attached to the content, but now it is more about helping ease discoverability.

CSS can also provide these benefits in your ongoing search engine optimization and search engine marketing efforts:

• By separating content and presentation, you can very easily experiment with different copy and presentation (for example font, background color, etc.) and test what converts best
• Less time spent maintaining web sites frees up webmaster resources, helping you to implement more and fresher content, and more SEO/SEM strategies

The remainder of this article digs deeper into these issues and overviews the CSS techniques you can use to achieve some of these benefits.

Arranging Content with CSS

Using CSS, you can move the most important elements to the top of the HTML file. As noted before, this may help some with the discoverability of the content. It no longer is a factor in how much weight search engines will place on the value of the content.
The basic technique we’ll use is to break the HTML source into logical sections that can be independently located and styled in the rendered page. The HTML element most commonly used for this is the <div> tag. Here’s an example of how to use this technique.

Problem: your navigation menu needs to appear visually “before” your unique page content, but you want to optimize your page for search engines. To do this, you want to move the menu section of your HTML code somewhere towards the bottom of the source file so that your unique content can come first.

Solution: mark up your navigation and content sections with <div> elements, then use CSS to locate them appropriately, as shown in the sample code below.

Sample CSS

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

#content {
margin-top: 20px;
margin-left: 160px;
width: 525px;
}
#nav-menu {
position: absolute;
left: 10px;
top: 20px;
width: 150px;
}
#nav-menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 135px;
}

The sample CSS causes the navigation menu to appear to the left of (visually “before”) the main content, even though it comes after the main content in the HTML file. You’ve now achieved two goals: optimizing the page for search engines by moving your unique content to the top of the file, while at the same time maintaining the desired end-user presentation.

Making Your Site More Crawlable

Look again at the sample HTML above. Notice that the navigation menu is created using standard HTML elements like unordered lists (<ul>) and anchors (<a>). This makes these links easily discoverable by search engine spiders, helping ensure that as much of your site is crawled as possible. Links embedded in javascript or other non-HTML code may or may not be found by the crawler, which could lead to a less complete crawl of your site.
While we won’t attempt to cover the details of building advanced menus with CSS, the code above can serve as a framework for building simple, effective navigation menus. CSS can be used to build many of the fancy navigational widgets often associated with javascript coding. For example, the following CSS builds on the previous example, turning your plain text menu links into fancier “rollover” buttons. There are many more things you can do to make your menus as fancy as you want. See, for example, Eric Meyers on CSS menus.

Styling Content with CSS

By using CSS, you can mark up your content in a way that is semantically meaningful (i.e., the tags indicate the meaning and importance of the various sections of text), but apply whatever visual styles you want to use from a design perspective. Here’s an example.

Problem: your designer has specified fancy fonts to be used for document heading text, and the developer has written HTML using the font and bold tags to produce those fonts. However, once again, you realize that a search engine reads the HTML source file much the same way that you would. It won’t render the document, so it won’t know that the font tag is being used to markup an important header. On the other hand, it would consider an <h1> tag as a section header and would use it as a good indicator of the contents of the document. Compare these two techniques below.

Using the <h1> tag with an associated style sheet renders the same result, but with the added benefit that your page is now marked up with semantic information that helps the search engine understand what it’s about, giving it a better chance of ranking higher for the terms in the <h1> tag.

Putting Your Pages on a Diet With CSS

Pages that use linked external CSS style sheets, rather than embedding a lot of style in the HTML, are lighter weight. These lighter files are faster to download for users who are browsing your site, as well as for search engine spiders. In addition to downloading smaller HTML files, CSS files are typically shared by multiple pages and cached by the user-agent (i.e., the web browser for human viewers, or the spider program for the search engine). So each time a new page is loaded and the browser or crawler sees the <link> statement including the stylesheet, it does not reload it since it already knows about it.
Lighter pages make it easier for search engines to discover your on-page content. It also makes your pages much easier to manage.

Get More SEO From Your Webmaster

Using CSS can make it faster and easier to maintain your web site. Helping make the webmastering task easier may also make it possible for you to spend more time doing things that improve your site from a search engine optimization and search engine marketing perspective.
For example:

• More time developing fresh content can help maintain and improve your search engine rankings
• Minor changes in content and look-and-feel of a page can have significant impacts on customer conversion rates. Making changes to things like fonts, background colors, and other style elements are fast and easy when the styling information is maintained in a CSS file

Some CSS Tricks to Avoid

There are a variety of “tricks” you can play with CSS, and no shortage of information on how to use them. Like other “grey hat” or even “black hat” techniques, these come with big red warning signs on them. Most of these examples come down to different ways of using CSS to hide text. While some of these techniques are justifiable from an “accessibility” or other user interface standpoint, you need to be careful that the search engines don’t see your technique as spam. To get a flavor of the issues involved in deciding whether and how to use these techniques, let’s take a look at a spectrum of examples: one that’s clearly black hat, a purely “accessibility” related one that is clearly not an attempt to spam the search engines, and one that may fall somewhere in the middle.
Using CSS to Hide Text
This technique harkens back to some of the earliest and most widely abused “optimization” techniques, namely stuffing your HTML document full of keywords that were hidden from the casual user, but very visible to the search engine. In the “old days”, the common technique was to use, say, white text on a white background. The CSS equivalent of that, and just as much a no-no, is to use the {display: none} rule. Another variation of this technique is to render the keyword stuffing at some coordinate that puts it off the visible page, e.g., at horizontal position -4000. Search engines can detect these things easily, and algorithmically, so it’s best that you stay away from these techniques.
Using CSS to Make a Page More Accessible
An example of this technique can be found on sites that provide “skip links” designed to work well with screen readers (devices used by people with impaired vision to browse web pages). Skip links are a convenience feature that let these users skip past navigation menus to get to content, or skip past content to get to menus. This can be a boon to the visually impaired user, but some web designers feel that skip links are confusing to the vast majority of users, and wish to hide them. CSS provides a convenient means of leaving these menus available in the HTML source, so that screen readers can render them, but making them invisible to regular web browsers.
While technically “hiding text”, it seems that, so far at least, no search engines have errantly flagged this technique as spam. You’re probably safe using this technique provided that you are doing it for the purpose of assisting visually impaired users.
Using CSS to Replace Images
There may be several legitimate reasons for using image replacement, and a couple of examples will demonstrate those reasons, as well as illuminating the technique itself. One common example is the desire to use some sort of graphic image, perhaps containing a company’s logo and a key marketing tag line, as a banner on a web page. Obviously, the company name and the tag line are important content, but they remain invisible, locked up in the image.
CSS can unlock this text for both the search engine to see, as well as for screen readers for the visually impaired, for text-based browsers (like lynx), or for regular browsers with images turned off. Let’s take a look at how you might do it:

This technique definitely falls into the grey area — use with caution! The reason for this is that it can be easily abused. The litmus test is whether the text in the image and the text in the HTML are the same. If instead of matching the tag line from the logo, you saw something like “Acme sells widgets, blue widgets, cheap blue widgets, best cheap blue widgets…” in the <h1> tag, you can be sure this is an attempt to spam the search engine, and if found, will be punished. Even if the text in the graphic image and the replacement text match exactly, and your intentions are purely “white hat”, you do run some risk that your page will get caught in a search engine spam filter and get penalized, so consider the risk and proceed with caution if using this technique.
Furthermore, a better technique for dealing with screen readers and browsers that don’t display images is to use the alt tag on all images. This is good SEO in any case, because there is real search volume on images, and the alt tag is the key to accessing that traffic.

Summary

While CSS has been widely adopted for purposes of making web pages faster to load, easier to modify, and compliant with standards, this technology also offers some key benefits for Search Engine Optimization. These benefits come from the clean separation between content and style that CSS affords. Because of this separation, you can write semantically meaningful, clean, light-weight HTML code that is physically organized in the best possible way for crawling and indexing by a search engine. At the same time, you can apply all the styling and visual layout you want to attain your web design goals. This is a powerful combination of benefits, indeed.