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'll discuss 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 </code> tag of your HTML.</p><br />
<p>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 <code><title></code> of the post, but the social network is still guessing your intent.</p><br />
<p>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.</p><br />
<p>You'll probably want to use your blog intro image to share after you've worked so hard at getting it designed.</p><br />
<p>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 was picked up as the article preview.</p><br />
<p>This is where Open Graph can make all the difference.</p><br />
<h3>Basic tags available for WordPress Open Graph?</h3><br />
<p>We've already seen a couple of quick examples of Open Graph tags. Let's discuss a few further examples of tags that we can use with our WordPress Open Graph.</p><br />
<p>This is the name that is used to share the post:</p><br />
<pre>og:title</pre><br />
<p>The preview image of your post. This is, of course, quite an important tag to enable the success of your social media campaigns:</p><br />
<pre>og:image</pre><br />
<p>This Open Graph tag will describe the actual URL to visit when the link is clicked:</p><br />
<pre>og:url</pre><br />
<p>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:</p><br />
<pre>og:description</pre><br />
<p>To explain these tags visually, here's an example of how our WordPress Open Graph tags are translated when sharing a post on Facebook:</p><br />
<div class="pic-full "><br />
<figure style="width: 583px" class="wp-caption aligncenter"><img class="attachment-670x670 size-670x670" src="https://premium.wpmudev.org/blog/wp-content/uploads/2016/10/facebook-og-example.png" alt="An example of a WPMU DEV posted when shared to Facebook." width="583" height="670" /><figcaption class="wp-caption-text">An example of a WPMU DEV posted when shared to Facebook.</figcaption></figure><br />
</div><br />
<p>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 <a href="http://ogp.me/#types">Open Graph types section</a>.</p><br />
<pre>og:type</pre><br />
<h3>Other Open Graph Tags Available for Describing Your Website's Content</h3><br />
<p>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.</p><br />
<p>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:</p><br />
<pre>og:audio</pre><br />
<p>and</p><br />
<pre>og:video</pre><br />
<p>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:</p><br />
<pre>og:site_name</pre><br />
<p>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.</p><br />
<h4>Additional Tags within Specific OG Tags</h4><br />
<p>Some of the tags described above can also take additional descriptive tags. Let's take the og<code>:image</code> as an example. Incidentally, og<code>:</code>video has exactly the same properties as og<code>:image</code>.</p><br />
<p>All of the below are additional properties that can be described using the corresponding Open Graph tags:</p><br />
<ul><br />
<li><code>og:image:url</code> – This is identical to <code>og:image</code> and can be used interchangeably.</li><br />
<li><code>og:image:secure_url</code> – This is the URL that should be used use if the website is accessible over HTTPS</li><br />
<li><code>og:image:type</code> – This tag describes the <a href="http://en.wikipedia.org/wiki/Internet_media_type">MIME type</a> of this image.</li><br />
<li><code>og:image:width</code> and <code>og:image:height</code> – these tags describe the dimensions of the image</li><br />
</ul><br />
<p>The following is a full example of using the <code>og:image</code> tag:</p><br />
<pre><code><meta property="og:image" content="http://premium.wpmudev.org/blog/image1.jpg" /> </code><br />
<code><meta property="og:image:secure_url" content="https://premium.wpmudev.org/blog/image1.jpg" /></code><br />
<code><meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /></code><br />
<code><meta property="og:image:height" content="300" /></code></pre><br />
<p>Other structured properties include:</p><br />
<ul><br />
<li><code>music.song</code></li><br />
<li><code>music.album</code></li><br />
<li><code>music.playlist</code></li><br />
<li><code>music.radio_station</code></li><br />
<li><code>video.movie</code></li><br />
<li><code>video.episode</code></li><br />
<li><code>video.tv_show</code></li><br />
</ul><br />
<p>All of these have their own tags that are used to provide additional details about the object.</p><br />
<p>But how do we go about implementing Open Graph tags in WordPress? There are a number of possible ways.</p><br />
<h3>Manually Setting Open Graph Tags</h3><br />
<p>I mentioned 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.</p><br />
<p>Using some edits in your site's <em>functions.php</em> file, you will be reading the data from your content and pushing it out as OG tags.</p><br />
<style>.gist table { margin-bottom: 0; }</style><br />
<div class="gist-oembed" data-gist="dattard21/7b99a3b4410a9aed173e8b7f2ac43578.json"></div><br />
<p>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.</p><br />
<p>The below is actually picking up the specific parts of your WordPress content and constructing OG tags from them:</p><br />
<style>.gist table { margin-bottom: 0; }</style><br />
<div class="gist-oembed" data-gist="dattard21/ca4400917eecc9c657a28b6db6f8fedb.json"></div><br />
<p>You'll need to customize a few of the tags above, such as replace the og<code>:site_name</code> 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<code>:admins</code> content tag.</p><br />
<h3>Setting up WordPress Open Graph Using a Plugin</h3><br />
<p>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.</p><br />
<p>If your primary social networking campaigns will be deployed through Facebook, you might want to install the official <a href="https://wordpress.org/plugins/facebook/">WordPress Facebook plugin</a>. As at the time of writing, this plugin has not been updated for a while so you may want to skip it for more recently updated versions of plugins.</p><br />
<p>There are a few other plugins you might want to check out. <a href="https://wordpress.org/plugins/open-graph-protocol-framework/">Open Graph Protocol Framework</a> is the new kid on the block. It's really simple to get up and running and it doesn't require any Facebook App to be created, which is a plus.</p><br />
<p>Another option for OG tags is the <a href="https://wordpress.org/plugins/wp-facebook-open-graph-protocol/">WP Facebook Open Graph protocol</a> plugin. The plugin adds all the important Facebook Open Graph Meta tag information to your site. It requires a Facebook App to be setup correctly, which feels a little bit of overkill given that it's mostly spitting out the OG tags.</p><br />
</div><div class="pic-full-screen " ><br />
<figure style="width: 850px" class="wp-caption aligncenter"><img class="attachment-1364x1364 size-1364x1364" src="https://premium.wpmudev.org/blog/wp-content/uploads/2016/10/ultimate-facebook.png" alt="Our Ultimate Facebook plugin provides an easy way for you to add Open Graph tags to your WordPress website." width="850" height="565" /><figcaption class="wp-caption-text">Our Ultimate Facebook plugin provides an easy way for you to add Open Graph tags to your WordPress website.</figcaption></figure><br />
</div><div class="container"><br />
<h3>Ultimate Facebook Plugin: Not Just Open Graph Tags</h3><br />
<p>Most of this post has been about social networks.</p><br />
<p>Let's face it, though, in most circumstances, Facebook is the social network of choice you should be focusing on.</p><br />
<p>The lifetime of a tweet on Twitter is very short, measured in minutes or even seconds. Google+ is not exactly the hottest and trendiest social network despite several years of iterations of development and attempts at merging it into all of your Google products. LinkedIn has its strong points and groups. Ello? Are you still alive and kicking? My most recent visit (only for the sake of writing this article) showed me it has rebranded to “The Creators Network.” It seems it's niching its audience in the hopes of success.</p><br />
<p>Facebook, on the other hand, despite several predictions of its untimely demise, is still the busiest community out there.</p><br />
<p>It has billions of very engaged users. If you've got money to spend, spend it on Facebook ;-) You'll be doing yourself a favor.</p><br />
<p>Why am I sucking up so much to Facebook? Unfortunately, I'm not a shareholder, nor have I got any relation to Zuckerberg.</p><br />
<p>There's a very simple but very valid reason.</p><br />
<p>One of the ways of making your website more successful is by creating an engaged community. By integrating your website tightly with Facebook you are riding piggyback on the popularity of the social network. You'll slowly pull in the Facebook community to your website and keep them engaged with your brand through Facebook. By making your website and Facebook mostly seamless, you're engaging with your community on their own terms.</p><br />
<p>Now, how do you go about making your website and Facebook come together?</p><br />
<p>Enter the <a href="https://premium.wpmudev.org/project/ultimate-facebook/">Ultimate Facebook plugin</a></p><br />
<p>Whilst I'm not going to go into detail here describing the whole feature set of this plugin, it's important to highlight a few of its benefits.</p><br />
</div><!-- end container --><div class="full-blogad full-blogad-seo" id="full-blogad-156652"><div class="full-blogad-container"><div class="row"><div class="col-sm-24 col-md-11 col-md-offset-1 col-md-push-12"><br />
<h3>SEO</h3><br />
<h4>Boost your traffic with SmartCrawl</h4><br />
<p>SmartCrawl supercharges your SEO using proven methods for optimization, ensuring high impact results with little effort. Set up automated sitemap generation, alert search engines when you have new and updated content, and control exactly how your web pages are displayed in search results.</p><br />
<a href="#" class="ghost-button-arrow i-wpmudev-tail-arrow open-trial">TRY SMARTCRAWL FREE</a><br />
<a href="https://premium.wpmudev.org/project/smartcrawl-wordpress-seo/" class="no-button">Find out more</a><br />
</div><br />
<div class="col-sm-24 col-md-10 col-md-offset-2 col-md-pull-12"><br />
<img src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/trial/seo.svg"><br />
</div></div><!-- end row --></div><!-- end full-blogad-container --></div><!-- end full-blogad --><div class="container"><br />
<h4>1. You Get All of the Essential WordPress Open Graph Tags</h4><br />
<p>We've been searching for ways to create WordPress Open Graph tags using plugins. This is another of the easy ones as already discussed. It's also got a specific feature, which is better than the rest of the plugins I tested.</p><br />
<p>I mentioned that there are quite a few Open Graph tags that are not used by every site, since they are for very specific types of content. Ultimate Facebook allows you to insert additional Open Graph headers manually.</p><br />
<div class="pic-full "><br />
<figure style="width: 670px" class="wp-caption aligncenter"><img class="attachment-670x670 size-670x670" src="https://premium.wpmudev.org/blog/wp-content/uploads/2016/09/Facebook_OpenGraph.png" alt="Facebook Open Graph support parameters" width="670" height="608" /><figcaption class="wp-caption-text">Facebook Open Graph support.</figcaption></figure><br />
</div><br />
<h3>2. Eliminate the Registration Barrier from Your Site</h3><br />
<p>You probably want your users to register on your site to bring about more benefits for them. Yet, whether you like it or not, registration is a barrier.</p><br />
<p>If you were to get rid of the barrier you would have much faster growth. With Ultimate Facebook and Connect, users will be able to register for your site using their Facebook account. This means registration becomes a simple one-click process.</p><br />
<div class="pic-full "><br />
<figure style="width: 670px" class="wp-caption aligncenter"><img class="attachment-670x670 size-670x670" src="https://premium.wpmudev.org/blog/wp-content/uploads/2016/09/Facebook_connect.png" alt="Allowing registration to your WordPress site through Facebook" width="670" height="598" /><figcaption class="wp-caption-text">Allowing registration to your WordPress site through Facebook</figcaption></figure><br />
</div><br />
<h3>3. Setup Facebook Comments on WordPress</h3><br />
<p>Deciding whether to use native WordPress comments or choosing between <a href="https://www.dart-creations.com/wordpress/wordpress-tips-and-tricks/wordpress-comments-plugins.html">WordPress comments systems</a> is something of a decision that is not to be taken too lightly. The reality is that if you want to switch between comment systems, the likelihood is that you're going to lose some information in the transfer.</p><br />
<p>Facebook comments is the best of most worlds. It's a great way of integrating Facebook with your website. It also brings about additional features which the native WordPress comments system does not have such as Liking comments and displaying comments by comments or popularity.</p><br />
<p>Of course, the fact users don't need to register to comment removes another engagement barrier.</p><br />
<p>And there's another bonus – using Facebook comments makes your site less prone to comment spam. Real Facebook user profiles are unlikely to be used to spam other websites because it will leave a negative impact on their profile.</p><br />
<h4>4. Post Articles and Updates Automatically to Your Facebook Accounts</h4><br />
<p>Auto-posting your articles to Facebook makes it much easier for your to bring your audience back to your website.</p><br />
<h3>The importance of WordPress OG tags</h3><br />
<p>Open Graph tags are essential for your WordPress website if you want to be in full control of the way your content is shared on social media. It's certainly worth doing because it not only helps you stand out from the crowd and draw more clicks and view, but you're also helping search engines better display your content.</p><br />
<div class='yarpp-related-rss'><br />
<p>Related posts:</p><ol><br />
<li><a href="https://premium.wpmudev.org/blog/social-media-plugins/" rel="bookmark" title="The Ultimate Social Media Plugin Guide for WordPress">The Ultimate Social Media Plugin Guide for WordPress </a> <small>Everybody knows by now that social media is important, so...</small></li><br />
<li><a href="https://premium.wpmudev.org/blog/integrating-social-media-with-wordpress-the-ultimate-plugin-guide/" rel="bookmark" title="Integrating Social Media With WordPress: The Ultimate Plugin Guide">Integrating Social Media With WordPress: The Ultimate Plugin Guide </a> <small>Social media transformed the way that people share information online....</small></li><br />
<li><a href="https://premium.wpmudev.org/blog/manage-social-media/" rel="bookmark" title="Tips and Tricks to Manage Your WordPress Social Media Campaigns Like a Pro">Tips and Tricks to Manage Your WordPress Social Media Campaigns Like a Pro </a> <small>It seems like everything has a hashtag and is shareable...</small></li><br />
<li><a href="https://premium.wpmudev.org/blog/social-media-sharing/" rel="bookmark" title="How to Get More People to Share Your Content on Social Media With WordPress">How to Get More People to Share Your Content on Social Media With WordPress </a> <small>How your posts appear when shared on social media can...</small></li><br />
</ol><br />
</div>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Posted by
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/03915854826290383054' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/03915854826290383054' rel='author' title='author profile'>
<span itemprop='name'>Unknown</span>
</a>
</span>
</span>
<span class='post-timestamp'>
at
<meta content='http://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html' itemprop='url'/>
<a class='timestamp-link' href='https://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2016-10-08T22:28:00-07:00'>10:28 PM</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-894408166'>
<a href='https://www.blogger.com/post-edit.g?blogID=4581500233836213611&postID=7903596531562047467&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=4581500233836213611&postID=7903596531562047467&target=email' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=4581500233836213611&postID=7903596531562047467&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=4581500233836213611&postID=7903596531562047467&target=twitter' target='_blank' title='Share to X'><span class='share-button-link-text'>Share to X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=4581500233836213611&postID=7903596531562047467&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=4581500233836213611&postID=7903596531562047467&target=pinterest' target='_blank' title='Share to Pinterest'><span class='share-button-link-text'>Share to Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Post a Comment</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/4581500233836213611?po=7903596531562047467&hl=en&saa=85391&origin=https://nottles1981.blogspot.com' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/1167892209-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://nottles1981.blogspot.com/2016/10/selling-digital-products-with-easy.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://nottles1981.blogspot.com/2016/10/the-missing-proposal-plan-for-ongoing.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://nottles1981.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://nottles1981.blogspot.com/feeds/7903596531562047467/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
</div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'><div class='widget Profile' data-version='1' id='Profile1'>
<h2>About Me</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/03915854826290383054' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Unknown
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/03915854826290383054' rel='author'>View my complete profile</a>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/'>
2016
</a>
<span class='post-count' dir='ltr'>(211)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/11/'>
November
</a>
<span class='post-count' dir='ltr'>(9)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/10/'>
October
</a>
<span class='post-count' dir='ltr'>(37)</span>
<ul class='posts'>
<li><a href='https://nottles1981.blogspot.com/2016/10/ultimate-wordpress-seo-guide-for.html'>Ultimate WordPress SEO Guide for Beginners (Step b...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/12-best-medical-wordpress-themes-for.html'>12+ Best Medical WordPress Themes for Hospitals An...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/8-must-do-steps-for-securing-and.html'>8 Must-Do Steps for Securing and Hardening Your Wo...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/exploiting-digital-currents-with.html'>Exploiting Digital Currents With WordPress</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/water-damage-restoration-company-in.html'>Water Damage Restoration Company in Alachua, FL 32616</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/introducing-lets-encrypt-free-ssl.html'>Introducing Let's Encrypt: Free SSL Certificates</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-protect-emails-from-spammers.html'>How to Protect Emails from Spammers with WordPress...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/kinsta-managed-hosting-reviewblazingly.html'>Kinsta Managed Hosting Review: Blazingly Fast and ...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/monstroid-divi-multipurpose-wordpress.html'>Monstroid & Divi Multipurpose WordPress Themes – M...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/chat-line-justchatlinecom.html'>Chat line justchatline.com</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/plugged-in-child-theme-plugins.html'>Plugged In: Child Theme Plugins</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/12-tested-and-easy-ways-to-grow-your.html'>12 Tested and Easy Ways to Grow Your Email List Fa...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-stock-photos-can-damage-your-site.html'>How Stock Photos Can Damage Your Site</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/changing-or-updating-your-version-of.html'>Changing or Updating Your Version of PHP for WordP...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-start-online-store-in-2016-step.html'>How to Start an Online Store in 2016 (Step by Step)</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/27-resources-for-wordpress-in-higher.html'>27 Resources for WordPress in Higher Education</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/understanding-and-using-wordpress-hook.html'>Understanding and Using the WordPress Hook System</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/the-art-of-upselling-your-clients-white.html'>The Art Of Upselling Your Clients [White Paper]</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/advanced-wordpress-development-using_15.html'>Advanced WordPress Development: Using Gulp to Stre...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/making-your-wordpress-website-fly.html'>Making Your WordPress Website Fly: A Performance O...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/nelio-content-automates-and-assists.html'>Nelio Content Automates and Assists with Content C...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/registrationmagic-new-powerful.html'>RegistrationMagic – a New Powerful Registration Pl...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/advanced-wordpress-development-using.html'>Advanced WordPress Development: Using the Command ...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/selling-digital-products-with-easy.html'>Selling Digital Products with Easy Digital Downloads</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html'>How to Add Facebook Open Graph Meta Tags to WordPr...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/the-missing-proposal-plan-for-ongoing.html'>The Missing Proposal Plan For Ongoing Website Care</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/10-email-templates-every-web-developer.html'>10 Email Templates Every Web Developer Needs to Ke...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/get-more-sales-with-google-shopping.html'>Get More Sales With Google Shopping Campaign For W...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/the-non-techy-guide-to-speed-up-your.html'>The Non-Techy Guide to Speed Up Your WordPress Blog</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/10-best-facebook-tips-and-tutorials-for.html'>10 Best Facebook Tips and Tutorials for WordPress ...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-start-your-own-podcast-step-by.html'>How to Start Your Own Podcast (Step by Step)</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-remove-powered-by-wordpress.html'>How to Remove the Powered by WordPress Footer Links</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/how-to-build-successful-website-5-core.html'>How to Build a Successful Website: The 5 Core Fact...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/setting-up-simple-ab-testing-with.html'>Setting Up Simple A/B Testing With Google Analytic...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/revealed-why-building-your-email-list.html'>Revealed: Why Building Your Email List is so Impor...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/10-ways-to-make-ecommerce-holiday-sales.html'>10 Ways To Make Ecommerce Holiday Sales Jingle [Eb...</a></li>
<li><a href='https://nottles1981.blogspot.com/2016/10/15-best-ecommerce-plugins-for-wordpress.html'>15 Best eCommerce Plugins for WordPress</a></li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/09/'>
September
</a>
<span class='post-count' dir='ltr'>(21)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/08/'>
August
</a>
<span class='post-count' dir='ltr'>(16)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/07/'>
July
</a>
<span class='post-count' dir='ltr'>(25)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/06/'>
June
</a>
<span class='post-count' dir='ltr'>(16)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/05/'>
May
</a>
<span class='post-count' dir='ltr'>(16)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/04/'>
April
</a>
<span class='post-count' dir='ltr'>(20)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/03/'>
March
</a>
<span class='post-count' dir='ltr'>(14)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/02/'>
February
</a>
<span class='post-count' dir='ltr'>(8)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2016/01/'>
January
</a>
<span class='post-count' dir='ltr'>(29)</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2015/'>
2015
</a>
<span class='post-count' dir='ltr'>(155)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2015/12/'>
December
</a>
<span class='post-count' dir='ltr'>(20)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2015/11/'>
November
</a>
<span class='post-count' dir='ltr'>(62)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://nottles1981.blogspot.com/2015/10/'>
October
</a>
<span class='post-count' dir='ltr'>(73)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div></div>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot no-items section' id='footer-1'></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot no-items section' id='footer-2-1'></div>
</td>
<td class='columns-cell'>
<div class='foot no-items section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Footer'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Simple theme. Powered by <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2112189061-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY42zQ6O_Z7yqnnsLPdgrsxacRW_9Q:1757067729785';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4581500233836213611','//nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html','4581500233836213611');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4581500233836213611', 'title': 'Grady Morgan', 'url': 'https://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html', 'canonicalUrl': 'http://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html', 'homepageUrl': 'https://nottles1981.blogspot.com/', 'searchUrl': 'https://nottles1981.blogspot.com/search', 'canonicalHomepageUrl': 'http://nottles1981.blogspot.com/', 'blogspotFaviconUrl': 'https://nottles1981.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Grady Morgan - Atom\x22 href\x3d\x22https://nottles1981.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Grady Morgan - RSS\x22 href\x3d\x22https://nottles1981.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Grady Morgan - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4581500233836213611/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Grady Morgan - Atom\x22 href\x3d\x22https://nottles1981.blogspot.com/feeds/7903596531562047467/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8768b2abe984dc7c', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '7903596531562047467', 'postImageUrl': 'https://premium.wpmudev.org/blog/wp-content/uploads/2016/10/facebook-og-example.png', 'pageName': 'How to Add Facebook Open Graph Meta Tags to WordPress Themes', 'pageTitle': 'Grady Morgan: How to Add Facebook Open Graph Meta Tags to WordPress Themes'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'Simple', 'localizedName': 'Simple', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'bold', 'variantId': 'bold'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Add Facebook Open Graph Meta Tags to WordPress Themes', 'description': 'When you\x27re doing social networking the right way for your website it can bring huge amounts of traffic.\xa0Social is all about the visuals so ...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_syrth8GoyKZ1uK1ja2n5OAxkrdF_2WrTERaDkgbLTy33F33oLM6lYIs97GLD41frNg5-c9pi7VjC0r8ZtQDhPdSnZ_t8DIlScxzAYIbG1jyBvSkMOb0ZTrohU9hoigFyEqWOT_GIrruE5D90RPwFALOgZ7qArj', 'url': 'https://nottles1981.blogspot.com/2016/10/how-to-add-facebook-open-graph-meta.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 7903596531562047467}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3944273060-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-right-1', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>