Add Facebook OG Attributes to HTML Tag
When adding Facebook Open Graph (OG) tags to your web pages, it is a good idea to add the required attributes to the <html> tag. Here is one way of doing it.
OG for the HTML Tag
The markup that should be added to the <html> tag changes frequently, depending on what the developers over at Facebook are doing. I’ve seen numerous variations on the following code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">Currently, this seems to be the best markup to use for any pages that include Facebook OG tags. Of course, things on the Web change constantly, so it is recommended that you confirm the code with other sources.
Add via WordPress
If you use WordPress, you can add the required Facebook OG attributes via the following custom function:
function shapeSpace_fb_og_html($content) {
return $content .' xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'shapeSpace_fb_og_html');That code snippet can be added to your theme’s functions.php file. Again, make sure that you are using the latest variation of the required OG markup.
Once that code is added to your theme, it will hook into the language_attributes tag:
<html <?php language_attributes(); ?>>
And thus the required OG attributes will be added to the <html> tag. You can verify this by viewing the source code of your web pages. Once the required OG attributes are included in the <html> tag, you’re good to go for adding whichever OG meta tags are required to represent your pages.
References & Resources
- Open Graph Protocol
- Facebook OG debugging tool (requires FB login):
https://developers.facebook.com/tools/debug/
★ Pro Tip:
WordPress Resources
![[ WordPress Themes In Depth ]](/wp/wp-content/uploads/go/250x250-wp-themes-in-depth-alt.jpg)
![[ BBQ Pro: Advanced WordPress Firewall ]](/wp/wp-content/uploads/go/250x250-bbq-pro.jpg)
![[ SAC Pro: WordPress Chat Plugin ]](/wp/wp-content/uploads/go/250x250-sac-pro.jpg)
![[ Wizard’s Collection: SQL Recipes for WordPress ]](/wp/wp-content/uploads/go/250x250-wizards-sql.png)
![[ GA Pro: WordPress + Google Analytics ]](/wp/wp-content/uploads/go/250x250-ga-pro.jpg)
![[ .htaccess made easy ]](/wp/wp-content/uploads/go/250x250-htaccess-made-easy.jpg)