Blogger Social Media Optimization with OGP Open Graph Protocol Meta Tags

Currently, the use of Open Graph Protocol (OGP) which is part of SEO (Search Engine Optimization) techniques is less noticed, because Google and other web giants no longer prioritize search results based on this but mostly based on the quality of the blog content you create.

Nevertheless, the OGP technique can help your blog to be spread widely on social networks, by adding tags to identify the main attributes of the blog page when shared on social networks such as Twitter. The result may be that your blog readers will increase slightly. Because with the Open Graph Protocol (OGP) Meta Tag, it allows any web page to become a rich object in the social graph. For example, it is used on Facebook to allow any web page to have the same function as other objects on Facebook.

In simple words, Open Graph Tags will organize your unstructured page data into structured information so that the page can be determined when shared on Social Sites such as Facebook, Twitter and others. They will take the featured image, description, title from the shared link. This will help visitors to see what the shared link is about and the chances of clicking on the link increase.

The Open Graph Protocol is a relatively simple way to turn any web page into a shareable social object by adding tags to identify key attributes of the page when shared on social networks like Facebook. Before we look at these OGP tags and how to integrate them into your Blogger blog, let’s look at how website links are shared on social networks.

1. Sharing Links on Facebook

When you share a URL when updating your Facebook status, Facebook scans the webpage and automatically creates a preview of the content that includes some useful information in addition to the URL you typed, such as:

a. TITLE for the web page you are sharing.

b. a short DESCRIPTION of the content on that page.

c. IMAGE of the page.

Once you publish your status, all this additional information becomes very important, because it will most likely influence whether one of your friends or relatives will click on the link. If the image looks interesting, or if the copy looks interesting, the chances are that the URL you share will be clicked and your blog will be read. However, sometimes when you share a link, the image, title, and description that Facebook automatically generates are missing or not very interesting.

post image

As a digital content publisher such as a blogger or WordPress, who wants to create content and share it on social media so that it can be clicked and read directly, it will greatly help promote the entire contents of the articles we write. Facebook social media has provided various utilities that can help you in publishing the content you create.

2. Open Graph Markup Code on Blogspot

How to make beautiful links on social networks when your posts are shared? To do this, you need to implement Open Graph markup, which is intended for posting to social networks. Have you ever encountered such an effect when you share a link on a social network with a certain page, while the image in the announcement is made completely “left”, not related to the topic, for example, an advertising banner; title - the name of the blog; and the description is the text from the blog footer.

If this is a problem on your blog, then it is easy to fix it, the main thing is to implement Open Graph markup. In this article, we will implement Open Graph markup into a Blogspot/Blogger blog. By embedding Open Graph markup, you can make your posts beautiful on social networks.

Before you set up Open Graph, familiarize yourself with its main meta tag code:

og:title: Write the title of your post, blog, etc.

og:url: This condition specifies the url (link) to your post, blog.

og:image: This condition will help you to put the desired image in the social network feed post.

og:description: This property represents the description of your blog homepage, post, etc. This will be displayed when you share on Facebook.

og:type: This property represents the type of page the user visited. We use blog/website for the homepage. In addition we use the article type for posts and videos.

fb:app_id: To use Facebook Insights you must add an app ID to your page. With Insights you can see analytics for traffic to your site from Facebook. Find the app ID in the App Dashboard.

og:locale: The language of the information source. By default it is set to en_US. You can also use og:locale:alternate if you have other language translations available. Learn about the languages ​​we support in our localization documentation.

So it's very clear, every code that starts with "og", is Open Graph markup code.

3. How to Use Open Graph Protocol Meta Tags

To enable your blog pages to become rich objects on Facebook’s dedicated social site, you need to install OGP for your blog.

Facebook outlines some recommended open graph tags to integrate into your site to help Facebook generate previews. The main tags that Facebook uses when generating previews. To enable Facebook OGP, follow the instructions below.

a. Type http://ogp.me/ns#

In order for OGP Facebook to be active on your blog page, the first step you must do is activate the Facebook link. The Facebook link must be typed in script no: 3 of your blog template. For more details on how to activate the Facebook link on your blog template, see the example script below.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
  
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>

b. Add OGP Meta tag

After you have finished adding the Facebook OGP attribute, in the script above, you continue by typing the script below after <!-- Awal OGP Facebook --> <b:if cond='data:blog.url'> <meta expr:content='data:blog.url' property='og:url'/> </b:if> <!--<meta expr:content='data:blog.title' property='og:site_name'/>--> <b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if> <!--<meta expr:content='data:blog.pageTitle' property='og:title'/>--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <meta content='article' property='og:type'/> <b:else/> <meta content='website' property='og:type'/> </b:if> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <meta expr:content='data:blog.postImageUrl' property='og:image:secure_url'/> <b:else/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/> <b:else/> <meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/> </b:if></b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <meta content='https://www.facebook.com/dapurnethotspot' property='article:publisher'/> <meta content='https://www.facebook.com/dapurnethotspot' property='article:author'/> <meta content='en_US' property='og:locale'/> <meta content='en_GB' property='og:locale:alternate'/> <meta content='id_ID' property='og:locale:alternate'/> <!-- Akhir OGP Facebook --> The implementation described above for Bogger is not limited, you can extend its functionality and add more OGP Structured Properties to identify your site with more information to the social graph, you can find and learn them by following the instructions available on the official Open Graph Protocol website.