post

How to Fix Facebook Related W3C Validation Errors

W3C.org ValidatorAs 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.

facebook Like buttonOne 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:

  1. <div xmlns:og="http://ogp.me/ns#" style="display:none;"> <![CDATA[ <!--OpenGraph section-->
  2. <meta property='og:type' content='blog' />
  3. <meta property='og:title' content='content' />
  4. <meta property='og:url' content='http://www.your-url.com' />
  5. <meta property='og:site_name' content='sitename' />
  6. <meta property='fb:app_id' content='fb-app-id' />
  7. ]]> </div>
<div xmlns:og="http://ogp.me/ns#" style="display:none;"> <![CDATA[ <!--OpenGraph section--> 
<meta property='og:type' content='blog' />
<meta property='og:title' content='content' />
<meta property='og:url' content='http://www.your-url.com' />
<meta property='og:site_name' content='sitename' />
<meta property='fb:app_id' content='fb-app-id' />
]]> </div> 

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.

  1. <meta property="og:locale" content="en_US" />
  2. <meta property="og:type" content="website" />
  3. <meta property="og:title" content="Victor M. Font Jr. - IT Consultant / Expert Witness / Author / Publisher" />
  4. <meta property="og:description" content="IT Consultant / Expert Witness / Author / Publisher / Musician / Vocalist / Renaissance Man" />
  5. <meta property="og:url" content="http://victorfont.com/" />
  6. <meta property="og:site_name" content="Victor M. Font Jr." />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Victor M. Font Jr. - IT Consultant / Expert Witness / Author / Publisher" />
<meta property="og:description" content="IT Consultant / Expert Witness / Author / Publisher / Musician / Vocalist / Renaissance Man" />
<meta property="og:url" content="http://victorfont.com/" />
<meta property="og:site_name" content="Victor M. Font Jr." />

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe 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.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Comments

  1. Fred C says

    Hi Victor.
    Should this code work on a HTML doctype 4.1 Transitional?
    Whatever, thanks for the solution, and in advance for your answer!

  2. dewita says

    I am still getting FB og validation errors even using the xmlns:og, og:type, og:title,og:url, og:site_name, fb:app_id. why? thanks ur sharing

  3. says

    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.

    • says

      Hi Andrea,

      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.

  4. says

    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..

    Thanks
    Safeer

    • says

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">

Current day month ye@r *