CSS & SEO

Styling for Google

Google with Style | CSS Tips
Google with Style | CSS Tips

Google recently released their new HTML/CSS Style Guides for Webmasters; to help create better websites, as well as the nudge-nod-wink to enhanced SEO.

While some of the suggestions seem fairly obvious, some are a bit surprising. Let’s take a look at a few.

Google's Suggestions

General

Protocol

  • Leave out protocols (http:, https:) from URLs pointing to various files unless they aren’t available for both protocols.

Indentation

  • Google says to Indent by 2 Spaces in code; don’t use Tabs.

Capitalization

  • Use only lowercase in code, including element names, attributes, attribute values, selectors, properties, and property values (except strings)

Encoding

  • Use UTF-8

Action Items

  • This is a new one on me – Mark “To Do” and action items with the keyword TODO in code, along with the contact name of person involved. Examples given are:

    {# TODO(john.doe): revisit centering #}
    <center>Test</center>

HTML Styles for Google

Document Type

  • Google suggests using HTML5 instead of XHTML. <!DOCTYPE html>

Validity

  • Use Valid HTML where possible. Test with the W3C HTML Validator

Semantics

  • Use Elements / Tags according to their original intent and purpose.

Separation

  • Google wants you to separate structure from presentation from behavior.

Format Block Level Elements in Code

  • Start each new block-level element on a new line in your code.

Quotation Marks

  • Use double Quotation marks (“”) for attribute values.

CSS Styles for Google

Validity

  • Use the W3C CSS Validator to validate your CSS whenever possible.

ID and Class Names

  • Use meaningful class and ID names, based on the element’s purpose; make names short as possible but as long as necessary.
  • Avoid qualifying ID and class names with type selectors. Instead of ul#example {}, use #example {}.

Shorthand

  • Google says, in short, use the shorthand when possible.

Zeroes

  • Don’t specify units after a 0 value but instead like margin: 0;
  • Don’t lead with a 0 value, but instead like font-size: .8em;

Hexadecimals

  • Use 3 digit declaration when possible. For example, instead of color: #eebbcc;, use color: #ebc;.

Declaration Order

  • Alphabatezie declarations.

Stops

  • Use a semicolon after every declaration, including the last one.
  • Use a space after the property name’s colon.

Declarations

  • Start a new line for each selector, declaration and rule.

Quotation Marks

  • Use single quotation marks for selectors & property values (”).
  • Do not use quotation marks in URI values (url()).

And that’s about it. Good luck with your implementation!

You May Also Like
Share
Tweet
Pin
Share
Scroll to Top