Google Publishes HTML and CSS Best Practice Style Guide

[engine]

Google Publishes HTML and CSS Best Practice Style Guide [googlewebmastercentral.blogspot.co.uk]

Our HTML and CSS Style Guide, just like other Google style guides, deals with a lot of formatting-related matters. It also hints at best practices so to encourage developers to go beyond indentation. Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write. Not surprisingly then, in our HTML and CSS style guide you’ll find both (as much as you’ll still find a lot of different development styles in our not entirely small code base).

[Andy Langton]

Interesting stuff overall, and good SEOs should know good code. I wonder if this is competition for the W3C, though?

[Marshall]

Any more, I question their motives.

Marshall

[johnhh]

or ... related to the "please let us read your css and js files" plea.

Do it this way and dance to our tune. I think it's an arrogant statement to make.

Good code is OK - but I'll write the code my way. Every code writer has a style.

[Andy Langton]

Let's not turn this into a Google-bashing thread. They're volunteering coding practices that are likely to be easier for them to interpret - and help you rank. You can, of course, write your code any way you choose. But this is an SEO forum, and SEO is involves changing a site to get it to rank better.

Some interesting bits and pieces in there too. Ditch type attributes? No entity references?

The W3C specs reigned supreme for SEO prior to HTML5 where IMO they dropped the ball. Perhaps Google want to be a contender now?

[johnhh]

Was not trying to "Google bash", its just they are trying to infiltrate every area of the web even where W3C ( which is an independent body ?) should be involved.

If Google suddenly re-defines the web that would be be a problem as Google is a for profit company.

If the algo or bot has an issue - and we, as webmasters ( this is a webmaster forum) , have to recode to please them is that applicable to the WWW as a whole ?

We all like to rank well and there are some interesting bits in there, and there are many bits that are not addressed.

The question to ask is WHY "They're volunteering coding practices" given they never volunteer anything.

Googles HTML 5 and javascript is , from what I have seen, to a very good standard.
_{edit spelling - one day I will be able to spell}

[deadsea]

These have nothing to do with ranking or SEO.

They are the guidelines that engineers at Google have to follow when building Google's own websites. They are intended to ease development, reduce bugs, promote brevity, and make code understandable to other engineers.

[Lorel]

I'm already complying with most of those "rules" except for spacing -- I put the { } on the same first and last line as the code and I don't indent because I understand that too much whitespace in CSS makes the file longer to load.

I really don't see the need to follow all of Google's recommendations if your website displays correctly in all browsers, unless Google decides to enforce it's own style guides-- in which case the whole Internet will need to be rewritten.

[Sgt_Kickaxe]

Let's not turn this into a Google-bashing thread.

Stating facts is not bashing. I'm not going to finish reading the Google document because I don't trust Google's generally self serving motives nor do I have ANY interest in making my sites conform to their wishes.

How is that not bashing? How is that useful to this discussion? W3 is my go to source for HTML and CSS and as far as I'm concerned Google just ranks stuff. If it helps others to see that the Google document is not the holy grail of html or css then perhaps fewer websites will be transformed into what Google wants instead of what they could have been.

If I am slapped with a penalty because I won't read their document I'll be sure to report that here. If you see a rankings boost from this document I am all ears! As of right now... nobody is saying anything about how effective it is because nobody has data to share, yet. My point of view is as equally valid as anyone else's because of that, we'll compare notes later.

Indentation: Indent by 2 spaces at a time.
Capitalization: Use only lowercase.

When I read things like that I think Google is going too far in trying to make the net conform, now THAT is an opinion(and why I stopped reading the document).

Also - if the rankings team is as in tune with the html/css team as they are with the adsense team their document that includes omitting various currently W3 recommended practices(closing P tags, document type etc) may in fact cause ranking issues.

[mrguy]

I question anything Google says anymore simply because they will probably come back in a year and decide those are not good practices and demote the sites that use them.

Kind of like how they just did!

[lucy24]

< moved from another location >

Alphabetize declarations.

Are they nuts? I'm not writing a CSS index, I'm writing a stylesheet. Declarations are grouped thematically, so I can find them: existing tags (format of <a> links, <em>, that kind of thing) headers, paragraphs, lists, tables, character modifiers...

Omit the protocol from embedded resources.

Omit type attributes for style sheets and scripts.

<link href='http://www2.blogger.com/widgets/3319451950-blogarchive.css' rel='stylesheet' type='text/css'/>

Use HTML5 / (It is recommended to use HTML, as text/html. Do not use XHTML. XHTML, as application/xhtml+xml, lacks both browser and infrastructure support and offers less room for optimization than HTML.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Do not use entity references. / There is no need to use entity references like &mdash;, &rdquo;, or &#x263a;, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.

Great code has many attributes. It&#8217;s effective, efficient, maintainable, elegant.

Use 3 character hexadecimal notation where possible / For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.

Use a space after a property name’s colon. / Always use a single space between property and value (but no space between property and colon) for consistency reasons.

margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 78% Arial, sans-serif;
color: #666666;

.

[edited by: Robert_Charlton at 5:47 am (utc) on May 3, 2012]
[edit reason] moved post from another location [/edit]

[Andy Langton]

The question to ask is WHY "They're volunteering coding practices" given they never volunteer anything.

IMO that's a bit of a jaded view. I'm no Google cheerleader, and they're no longer the cuddly company made of lego they once were. But they've got a pretty good history of sharing code and the like.

The reason that the HTML spec has been the on-page SEO bible for many with a focus on more technical SEO is that good code is about coding in a way that machines can understand - from your browser all the way up to a search engine. So if we tweaked an earlier comment:

These have nothing to do with ranking or SEO.

They are the guidelines that engineers at Google have to follow when building Google's own websites. They are intended to ease development, reduce bugs, promote brevity, and make code understandable to other engineers.

...into "make code understandable to other engines", that's why any major source offering mark-up advice may be worth listening to.

Alright, there's nothing particularly juicy in these guidelines, but if Google gives direct code advice, I pay attention, whether I plan on following their advice or not. There's either a commercial advantage or there isn't.

[lucy24]

They are the guidelines that engineers at Google have to follow when building Google's own websites.

See above. (The discontinuity is because my post started out as a response to something in the thread about crawling java and css, but it seems to belong better over here.)

If you can read someone's Guidelines and not immediately go pawing through their code to see if they scrupulously follow their own recommendations ... Mister, you're a better man than I ;)

[deadsea]

The question to ask is WHY "They're volunteering coding practices" given they never volunteer anything.

When it comes to sharing source code and engineering practices, I give Google the "least evil company I know" badge. (And I believe that overall Google is a very evil company now.) I personally use their open source gson and guava libraries. There are hundreds of other projects they have released as open source. As far as I can tell, Google also invented the NoSQL database and the MapReduce programming paradigm. Two technologies that are massively changing the way that computer software is written. And Google is doing nothing to prevent others from using them.

[johnhh]

I agree their "back-end" developments are interesting and I use some libraries too.

When it comes to the "front-end" thats another matter and I do wonder about the degree of integration with the teams running Google search.

I guess the real question here is - will this "guide" have SEO implications ?

[AndyA]

According to W3C's validator, Google's home page has 36 errors and 2 warnings. Either Google's folks aren't following their own guidelines, or they haven't implemented them yet.

I'm also concerned about not using closing tags for paragraphs, which as far as I know is still a recommended practice. Also, I've always been under the impression in CSS, there are to be no spaces in declarations:

color:#fff; (correct) vs. color: #fff;

I'm sure I specifically read that at W3C, but Google used a space in its guidelines. I hope we aren't heading to a time where we have to create multiple style sheets for different browsers or search engines to make them happy. I can still remember a time when I created different html pages for Netscape and IE to get them to display the same, and it was time consuming.

[zdgn]

Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write.

What does that really mean? I can be my own 'style guide author' too, you know.

I take pains to design and develop (W3C valid) stuff so that it's convenient for me to maintain while adhering to strict standards already.

I will follow my own formatting and dev guidelines and practices (again, all W3C valid), thank you!

Besides, I think some of Google's silly 'guidelines' - rule sorting or unminifieds or "meaningful" annotations - are plain self-serving to Googlebot (who I won't let snoop through my css/js anyway, regardless of what Mr Cutts demands [webmasterworld.com].)

[rlange]

I think some of these suggestions are made with the unstated assumption that you'll be running your HTML and CSS through some deployment process that strips out everything that's unecessary for rendering. For example, "Mark todos and action items with TODO". I would never put TODO's in code that could be viewed by the public. It's useful internally, but the public doesn't need to know about it.

The "Indent by 2 spaces at a time" suggestion seems based on that assumption, too. Using tabs instead of spaces can result in significantly smaller file sizes, unless you strip out all unnecessary whitespace at some point in the deployment process.

lucy24 wrote:
Are they nuts? I'm not writing a CSS index, I'm writing a stylesheet. Declarations are grouped thematically, so I can find them: existing tags (format of <a> links, <em>, that kind of thing) headers, paragraphs, lists, tables, character modifiers...

They're not suggesting you alphabetize your selectors. They're suggesting that you alphabetize the property declarations for your selectors.

AndyA wrote:
I'm also concerned about not using closing tags for paragraphs, which as far as I know is still a recommended practice.

Seeing their code examples without closing paragraph tags bothered me, too.

zdgn wrote:
Besides, I think some of Google's silly 'guidelines' - rule sorting or unminifieds or "meaningful" annotations - are plain self-serving to Googlebot [...]

In what way? It's not like Google can't sort CSS properties once they've been parsed; it's a trivial process to automate at that point.

--
Ryan

[Sgt_Kickaxe]

I'm also concerned about not using closing tags for paragraphs, which as far as I know is still a recommended practice.

Google doesn't trust webmasters and never wants to take what we add to a site as something they rely on so it makes sense that if they see an opening paragraph tag, and later another opening tag, that what was in between was a paragraph. Afterall, webmasters might be stupid and forget to close a tag right? Does this mean ALL closing tags are ignored by Google? Probably.

Does that mean you should omit them? Absolutely not. Proper formatting and completeness isn't optional. Can you imagine if we all wrote in a way Google understands (since they know what were going to write before we write it)? it would look something like this...

<p>This paragraph was written for Google to show what Google sees.</p>

Would become: <p>Thi parag wa writ fo Goo to sh wha Goo see

...and I think enough youngsters try to write like that already but that doesn't mean it's right. Don't encourage it.

[rlange]

Sgt_Kickaxe wrote:
Proper formatting and completeness isn't optional.

Well, in HTML5, for certain tags, it is: The HTML syntax - Optional tags [whatwg.org].

This isn't Google trying to redefine standards. Closing a <p> element is technically optional in HTML5 (but still looks so very wrong to me).

--
Ryan

[AndyA]

Isn't HTML5 still a year away from being finalized? I seem to remember seeing 2014 as the latest target date. I know sites are using it already, though.

[rlange]

AndyA wrote:
Isn't HTML5 still a year away from being finalized?

They began work on it in 2004, so, at this point, "a year away" is practically "tomorrow". :o)

--
Ryan

[netmeg]

On the scale of things I worry about when it comes to Google, this one is pretty low.