How to Fix Facebook Related W3C Validation Errors

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.

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur and high performing executive with global Information Technology experience in application development, project management, business analysis, quality assurance, and leadership development. A Founding Board Member of the North Carolina Executive Roundtable, Victor has served as a member of the International Institute of Business Analysis, Association of Information Technology Professionals, and Toastmasters International. He is author of several books including “The Ultimate Guide to the SDLC,” ISBN: 978-0-9855666-4-7 and the Winning With WordPress series.

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Thanks, Victor, for your article. I am still getting FB og validation errors even using the you have>> Would be grateful for any assistance – also do you have any work-arounds for the multiple errors I get with Twitter?!

Facebook doesn’t look for meta tags on your site. Only search engines do. Besides, that code I show in the article isn’t designed to do anything. Those meta tags are inserted by Facebook plugins. All I am demonstration is how to hide it from the validation engine.

Facebook looks for these opengraph tags in order to pull the correct information when putting a link into a post in Facebook. If the items are hidden in the body, facebook can’t see the information and just pulls images randomly from the page instead of a specific image.

I recently watched a video by Matt C. stating that google does not validate. I’m interested in understanding how validation effects the search engine algorithm since they don’t validate. I understand it’s important but regarding SE I’d like some clarification. Thanks in advance.

You are correct that Google, as a search engine, doesn’t validate. However, the bots that crawl to web to index content for the search engines expect well formed and validated code. If your code is not correct, a bot will encounter it, not know what to do, and move on to it’s next target, completely skipping your content. The best illustration I can come up with is the little Roomba vacuum cleaner. When it hits a bump, it turns around and goes someplace else. Well, when a search engine bot hits a bump (badly formed code), it turns around and goes someplace else. That’s it in a nutshell. The more content you can have indexed, the better it is for your search engine rankings. Thanks for asking.

Hello,
I tried your method and it worked for the w3 validation. But the facebook debugger is giving the error that meta tags are outside the head !!
can you please give me an advice to fix this issue..

As I mentioned in the article, this method will produce warning messages in the Facebook debugger. There is no workaround. Either you want to pass W3C validation or the Facebook debugger. You can’t have both. Make your choice.