• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / How to Fix Facebook Related W3C Validation Errors

How to Fix Facebook Related W3C Validation Errors

By Victor M. Font Jr.
September 24, 201120 Comments

W3C.org Validator

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.

facebook Like button

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.

  • 9shares
  • Facebook0
  • Twitter3
  • Pinterest0
  • LinkedIn4
  • Print
  • SMS1

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

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)

Leave a Reply to David Gimenez Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Maria Seoane

    June 11, 2021 at 12:45 pm

    great article, Thanks

    Reply
  2. frankzeffi

    June 25, 2013 at 6:22 am

    What is the basis for validating the document if it does not work the OpenGraph?

    Reply
  3. Fred C

    June 20, 2013 at 12:12 pm

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

    Reply
  4. David Gimenez

    March 8, 2013 at 12:20 am

    Thank you for the great article Victor!

    I had some doubts about The Open Graph Protocol meta tags and you clarified them!

    Reply
  5. Takis G

    February 23, 2013 at 11:06 am

    how can i change that in joomla?

    Reply
  6. Brad Dalton

    January 13, 2013 at 10:28 am

    I think a lot of sites will find this error with OG tags when validating using http://validator.w3.org

    I think the theme developers should provide a fix for this or build it into all new updates.

    Reply
  7. vkm

    September 4, 2012 at 7:30 am

    I’m still getting validation errors. I’m going crazy. :(

    Reply
  8. dewita

    May 30, 2012 at 8:27 am

    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

    Reply
  9. David H.

    April 17, 2012 at 9:23 pm

    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?!

    Thanks, DAvid ( for errors run validtion of http://www.aloe-vera.org/index.htm )

    Reply
  10. vinilos decorativos

    April 5, 2012 at 2:39 pm

    Excellent, thank you !

    Reply
  11. marie

    March 22, 2012 at 12:00 pm

    This code is not working. Do you think that FB has changed how they find the meta tags and excludes this one?

    Reply
    • Victor Font

      March 22, 2012 at 5:34 pm

      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.

      Reply
      • marie

        March 23, 2012 at 3:41 pm

        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.

        Reply
        • marie

          March 23, 2012 at 3:42 pm

          Also, http://opengraphprotocol.org/schema/ is no longer a valid site.

          Reply
          • Victor Font

            March 25, 2012 at 10:16 am

            Thanks for the heads up Marie. The link still works through redirects. Nevertheless, I’ll change it to http://ogp.me/.

  12. Andrea

    January 25, 2012 at 4:17 pm

    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.

    Reply
    • Victor Font

      January 25, 2012 at 5:10 pm

      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.

      Reply
  13. Rosy

    January 24, 2012 at 1:34 am

    Thank you very much

    Reply
  14. safeer

    December 27, 2011 at 9:28 am

    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

    Reply
    • Victor Font

      December 27, 2011 at 10:19 am

      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.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page