As a provider of web based solutions, it's critically important to me that the sites I create pass W3C validation. What is W3C validation? W3C is short for the World Wide Web Consortium. The W3C is an international community where member organizations, a full-time staff, and the public work together to develop web standards. According to w3.org, its mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.
Building sites to a standard is the best way to achieve a broad based interoperability with the various browsers available to the general market. In other words, if you build to a standard, your site will look and function pretty much the same no matter what browser you use. You must realize of course, that every browser implements standards somewhat differently. Building to a standard is no guarantee that your site will work with every browser, but it sure lets you sleep well at night knowing that if your site doesn't work with a particular browser, it's not your fault. Building to a standard also helps search engines crawl your site more efficiently. Many crawlers will simply stop and move on to the next site if they encounter markup errors in your site that they cannot parse. As a result, some of your pages may not get indexed and your search engine ranking could be impacted.
One of the most popular features people add to their websites is the Facebook Like button. Facebook has one of the largest user bases, if not the largest, in the entire world. Social media marketing offers tremendous advantages in generating leads and traffic to your site. But here's the catch-22, adding the Facebook Like button to your site will always generate W3C validation errors. W3C validation errors may impact your search engine ranking. An impacted search engine ranking can produce fewer visitors and less traffic to your site. Less traffic means lower revenue if you've monetized your site. So the very thing you do to build traffic may produce the opposite effect. Why is this and what can be done to have both the Facebook Like button and adhere to W3C standards? It can be done!
Let's tackle the first question, why does the Facebook Like button cause the W3C Validator to report markup errors? Facebook requires that website developers use the Open Graph Protocol to integrate web pages into the social graph. But rather than have me try to explain what this means, let me quote from the Facebook developer core concepts open graph protocol page:
The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world thingsâthings like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.
What this is saying is that to integrate our sites with Facebook, we have to add Open Graph Protocol tags to our pages. Open Graph Protocol tags are a form of â¹meta⺠tag. Meta tags are inserted within the â¹head⺠area of a web page. If you're not familiar with the â¹head⺠area of a web page, don't worry about it. The head area is a container that can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The Open Graph Protocol meta tags take the form of: â¹meta property='og:type' content='blog' /âº
This is where the problem is with W3C Validation. The Open Graph Protocol tags are not valid HTML. There is no property element defined for meta tags in any of the W3C standards. Hence, the validation error. The fix is not all that difficult, although it eludes many developers. Here it is:
The above code is inserted anywhere within the document's â¹body⺠tag. I personally like placing it immediately after the â¹body⺠tag. We create an invisible â¹div⺠element that references the Open Graph Protocol schema and wrap it around the required Open Graph Protocol meta tags. But wait, you say! Meta tags are not allowed within the â¹body⺠tag. Won't this fix cause a W3C validation error?
Great question! But no, it won't cause a validation error because of the CDATA wrapper. A CDATA section is a section of an element's content that is marked for the parser to interpret only as character data, not markup. The W3C Validator ignores the CDATA section because its interest is validating markup. The beauty of this fix is that Facebook's Open Graph Protocol doesn't really care where on the page the meta tags are located. It only cares that they exist. This code is perfectly valid to integrate with Facebook. It will generate warnings when you check your page in the Facebook debugger, but quite frankly, I don't care about the Facebook debugger warnings. My priority is passing W3C validation, and this code passes. Not only does it pass, but it works as Facebook intended.
The thing that you have to be very careful about is that there are other sites that use the Open Graph Protocol. While this fix works with Facebook, it may not work with other sites. An alternative is to use the HTML5 doctype which isn't quite as picky.
Since I originally wrote this article, I've received reports that the CDATA masking technique doesn't work for some users. After updating this site to HTML5, I ran the W3C Validator against it again. The Facebook Open Graph data passed validation without modification. This time however, I used the Yoast SEO plugin to add the Open Graph meta data. I've included it below so you can compare the difference from the original source code above to the meta data the SEO plugin produces.
