How to Add Facebook Open Graph Meta Tags to WordPress Themes
How to Add Facebook Open Graph Meta Tags to WordPress Themes
When you’re doing social networking the right way for your website it can bring huge amounts of traffic.Social is all about the visuals so if you want to make your content work well you need to use all the right visual cues.
But how do you make sure the right imagery the imagery you want is being used? How can you be in control when your content is shared, rather than let your social network of choice choose an image at random for you?
You need to make recommendations to social networks, so that they’ll know what you’d prefer to show.And to do this, you’ll need to use a language social networks understand.
That language is called Open Graph. In this article, I’lldiscuss various ways of setting up Open Graph on your WordPress website.What is the Open Graph Protocol?
The Open Graph protocol is a way to explain all the characteristics of an object, e.g. a post on your website, to make it richer in the context of social networks. By explaining the characteristics of your post, Social Networks will be able to understand (rather than guess) what the author had in mind for that article and then use it accordingly.
For example, if you don’t specify the open graph title for your post, social networks will have to guess it from the <title> tag of your HTML.
Finding the title of a post is quite trivial since it is fairly standard for people to use the name of the post in the <title> of the post, but the social network is still guessing your intent.
An even more practical example of how Open Graph is useful to you as a WordPress user is which image to show when your article is shared on social networks. If you don’t specify an Open Graph image, Facebook and other social networks will try to guess which image they should use as the preview to your article.
You’ll probably want to use your blog intro image to share after you’ve worked so hard at getting it designed.
However, it is quite often that mistakes are made when guessing the image to use as the preview. For example, the logo of your website may get picked up, or another image in the article, which was not meant as the article preview. An even worse experience would be if the image of an ad waspicked upas the article preview.
This is where Open Graph can make all the difference.Basic tags available for WordPress Open Graph?
We’ve already seen a couple of quick examples of Open Graph tags. Let’s discuss a few further examples of tags thatwe can use with our WordPress Open Graph.
This is the name that isused to share the post:og:title
The preview image of your post. This is, of course, quite an important tag to enable the success of your social media campaigns:og:image
This Open Graph tag will describe the actual URL to visit when the link is clicked:og:url
The description is also something that is highly visible, so customizing this to encourage people to visit your site is essential. Many people actually use the meta description contents here, which many times have also been optimized for high click-through rates:og:description
To explain these tags visually, here’s an example of how our WordPress Open Graph tags are translated when sharing a post on Facebook:
An example of a WPMU DEV posted when shared to Facebook.
The type Open Graph tag describes whether the object being shared is an article, a video, music, a book, a user profile or a website. There are further tags which can be used to describe each specific type. You can have a look at the detailed tags which can be used in the Open Graph types section .og:type Other Open Graph Tags Available for Describing Your Website’s Content
Besides the above basic tags, there are a number of further Open Graph tags that can be used with your WordPress website to further describe the content.
Most of the Open Graph WordPress tags are optional, however, there’s lots of content that will be better enabled if these tags are populated correctly:og:audio
If there is any kind of audio or video that can compliment this content, this OG tag can be used to describe it’s URL location:og:site_name
Larger sites that have thousands of pieces of content may want to use this tag to denote that the content being shared is part of the larger branded site.Additional Tags within Specific OG Tags
Some of the tags described above can also take additional descriptive tags. Let’s take the og :image as an example. Incidentally,og : video has exactly the same properties asog :image .
All of the below are additional properties that can be described using the corresponding Open Graph tags:og:image:url This is identical to og:image and can be used interchangeably. og:image:secure_url This is the URL that should be used use if the website is accessible over HTTPS og:image:type This tag describes the MIME type of this image. og:image:width and og:image:height these tags describe the dimensions of the image
The following is a full example of using the og:image tag:<meta property="og:image" content="http://premium.wpmudev.org/blog/image1.jpg" />
<meta property="og:image:secure_url" content="https://premium.wpmudev.org/blog/image1.jpg" />
<meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
Other structured properties include:music.song music.album music.playlist music.radio_station video.movie video.episode video.tv_show
All of these have their own tags that are used to provide additional details about the object.
But how do we go about implementing Open Graph tags in WordPress? There are a number of possible ways.Manually Setting Open Graph Tags
Imentioned a bit further up in this article that you should be able to extract most of the information required for OG tags from your existing WordPress content.
Using some edits in your site’s functions.php file, you will be reading the data from your content and pushing it out as OG tags.
This is required such that social networks using your content will actually know that there are Open Graph tags being used to describe your WordPress content.
The below is actually picking up the specific parts of your WordPress content and constructing OG tags from them:
You’ll need to customize a few of the tags above, such as replace the og :site_name with the actual name of your site. You’ll also need to discover your Facebook admin id and replace it in the value of the fb :admins content tag.Setting up WordPress Open Graph Using a Plugin
To take advantage of using Open Graph, you will need to setup your WordPress website such that this information is picked up as necessary from your content and added to any WordPress content.
本文开发（php）相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师
本文标题：How to Add Facebook Open Graph Meta Tags to WordPress Themes