Guias HTML para facebook
Aprenda como identificar e corrigir erros comuns de validação HTML sinalizados pelo W3C Validator — para que as suas páginas cumpram os padrões e sejam renderizadas corretamente em todos os navegadores. Consulte também o nosso Guias de acessibilidade.
Understanding the Issue
In the early days of the Open Graph Protocol (used by Facebook, LinkedIn, and other platforms to parse shared links), developers were instructed to add XML namespace declarations like xmlns:og and xmlns:fb to the <html> element. This was borrowed from XHTML conventions where custom prefixed attributes required namespace bindings.
However, modern HTML5 documents are not XML. The HTML5 parser does not support arbitrary namespace declarations in the way XHTML/XML does. Attributes with colons in their local names (like xmlns:og) are not serializable as XML 1.0, meaning they cannot be reliably round-tripped between HTML and XML parsers. The W3C validator flags this because these attributes violate the HTML serialization rules.
The good news is that these namespace declarations have never been required for Open Graph tags to work. Social media crawlers (Facebook’s, Twitter’s, LinkedIn’s, etc.) parse <meta> tags based on the property attribute value directly — they don’t rely on XML namespace resolution. Browsers also ignore these attributes entirely, so removing them has zero impact on functionality.
How to Fix It
- Locate your <html> opening tag.
- Remove any xmlns:og, xmlns:fb, or similar namespace attributes.
- Keep your Open Graph <meta> tags exactly as they are — they will continue to work.
Examples
❌ Incorrect: Namespace attributes on the <html> element
<!DOCTYPE html>
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Page</title>
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A description of my page.">
<meta property="og:image" content="https://example.com/image.jpg">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
This triggers the validator warning: Attribute with the local name “xmlns:og” is not serializable as XML 1.0 (and similarly for xmlns:fb).
✅ Correct: Clean <html> element without namespace attributes
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A description of my page.">
<meta property="og:image" content="https://example.com/image.jpg">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The Open Graph <meta> tags remain unchanged and will continue to be recognized by Facebook, LinkedIn, and all other platforms that support the Open Graph Protocol. The only change is removing the unnecessary xmlns:og and xmlns:fb attributes from the <html> tag.
Common Variations
You may also encounter other namespace prefixes like xmlns:article, xmlns:product, or xmlns:music. These are all unnecessary in HTML5 and should be removed:
<!-- ❌ Remove all of these -->
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:article="http://ogp.me/ns/article#" xmlns:fb="http://www.facebook.com/2008/fbml">
<!-- ✅ Keep it simple -->
<html lang="en">
Note that the standard xmlns attribute (without a colon prefix) is allowed on the <html> element in HTML5 if its value is exactly http://www.w3.org/1999/xhtml. However, even this is unnecessary and can be omitted. The prefixed forms like xmlns:og are never valid in HTML5.
The xmlns:fb attribute was an XML namespace declaration used to enable FBML (Facebook Markup Language) tags on websites. FBML allowed developers to embed Facebook-specific elements like <fb:like>, <fb:comments>, and <fb:share-button> directly in their HTML. Facebook officially retired FBML in 2011 and replaced it with the JavaScript SDK and social plugins, yet many websites still carry this outdated namespace declaration in their markup.
In HTML5, the only xmlns attribute allowed on the <html> element is the standard xmlns="http://www.w3.org/1999/xhtml", and even that is optional. Custom namespace prefixes like xmlns:fb or xmlns:og are XML constructs that have no meaning in HTML5 and are flagged as validation errors.
Why This Is a Problem
- Standards compliance: HTML5 does not support arbitrary XML namespace declarations. The xmlns:fb attribute violates the HTML specification, producing a validation error.
- Dead technology: FBML no longer functions. Facebook’s servers no longer process FBML tags, so the namespace serves no purpose whatsoever.
- Code cleanliness: Keeping deprecated, non-functional attributes in your markup adds confusion for developers maintaining the codebase and suggests the site hasn’t been updated in a long time.
How to Fix It
- Remove xmlns:fb (and any other custom namespace like xmlns:og) from your <html> tag.
- Remove any FBML tags such as <fb:like>, <fb:comments>, or <fb:share-button> from your page content.
-
Replace with modern alternatives:
- Use the Facebook JavaScript SDK for social plugins.
- Use Open Graph <meta> tags in the <head> to control how your pages appear when shared on Facebook. These <meta> tags use the property attribute (e.g., property="og:title") and do not require any namespace declaration in HTML5.
Examples
❌ Invalid: Using xmlns:fb on the <html> tag
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>My Page</title>
</head>
<body>
<fb:like href="https://example.com" width="300"></fb:like>
</body>
</html>
This triggers the error “Attribute ‘xmlns:fb’ not allowed here” because HTML5 does not permit custom XML namespace prefixes on the <html> element. The <fb:like> tag is also invalid HTML and no longer functional.
✅ Valid: Using Open Graph meta tags and the JavaScript SDK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title" content="My Page">
<meta property="og:description" content="A description of my page.">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/image.jpg">
</head>
<body>
<h1>My Page</h1>
<!-- Facebook Like button using the JavaScript SDK -->
<div class="fb-like" data-href="https://example.com" data-width="300" data-layout="button_count"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0">
</script>
</body>
</html>
The xmlns:fb attribute is gone, Open Graph metadata is provided via standard <meta> tags, and the like button is rendered using Facebook’s JavaScript SDK with data-* attributes—all fully valid HTML5.
In older XHTML documents, XML namespaces were declared using the xmlns attribute with a prefix, such as xmlns:og="http://ogp.me/ns#". While this syntax was valid in XHTML, HTML5 does not support custom XML namespace declarations on the <html> element. The W3C validator will flag any xmlns:* prefixed attribute (like xmlns:og, xmlns:fb, etc.) as invalid because HTML5 has a strictly defined set of allowed attributes on the <html> element.
The Open Graph Protocol, originally developed by Facebook, allows web pages to become rich objects in a social graph. Major platforms like Facebook, Twitter, LinkedIn, and others rely on Open Graph <meta> tags to generate link previews. The official Open Graph Protocol specification recommends using the prefix attribute on the <html> element instead of the xmlns:og namespace declaration.
The prefix attribute is part of the RDFa specification and is recognized by HTML5 as a valid way to declare vocabulary prefixes. By switching to prefix="og: https://ogp.me/ns#", you maintain full Open Graph functionality while keeping your HTML valid.
How to fix it
- Locate the <html> tag in your document.
- Remove any xmlns:og (or similar xmlns:*) attributes.
- Add or update the prefix attribute with the appropriate namespace declaration.
If you use multiple prefixes (e.g., Open Graph and Facebook-specific tags), you can combine them in a single prefix attribute, separated by a space.
Examples
❌ Invalid: Using xmlns:og (XHTML-style namespace)
<!DOCTYPE html>
<html lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<title>My Page</title>
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/image.jpg" />
</head>
<body>
<p>Page content here.</p>
</body>
</html>
This triggers the validator error: Attribute “xmlns:og” not allowed here.
✅ Valid: Using the prefix attribute
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>My Page</title>
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/image.jpg" />
</head>
<body>
<p>Page content here.</p>
</body>
</html>
✅ Valid: Multiple prefixes (Open Graph and Facebook)
If you also use Facebook-specific meta tags (like fb:app_id), declare both prefixes:
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb#">
<head>
<title>The Rock (1996)</title>
<meta property="fb:app_id" content="123456789" />
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
</head>
<body>
<p>Page content here.</p>
</body>
</html>
❌ Invalid: Multiple xmlns declarations
This older pattern with multiple namespace declarations is equally invalid in HTML5:
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
Replace it with the single prefix attribute as shown in the examples above.
Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.