How to set Open Graph meta tags using Easy Social Share Buttons

How to set Open Graph meta tags using Easy Social Share Buttons 1

[vc_row][vc_column][vc_column_text]Open Graphs are meta tags, included in the code of each page. These tags are used to customize and control the data that each network grabs from the page. Without such tags, social networks choose what to take as shared information by their own. But that automatic grab from the page content isn’t so useful and in 99% do not fit the global social marketing strategy of the website’s owners. In that article, we will describe how to customize the meta tags on your way using Easy Social Share Buttons.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Check if there are any OGs active on your installation

The first very important step, when setting OGs (not only via ESSB but with any other service or application), is to check if there are any Open Graph tags generated already. One of the most important rules about the OGs is that it is needed just one instance of a ttag to be generated. To check that follow these steps:

Load your site at Chrome and press Ctrl+U – that will load you the source code of the site.

Press Ctrl+F  – that will open little search dialog at the upper right corner of the window and allow you to search in the code by keyword.

Type og: at the search dialog and press Enter – that will mark you all the places in the code where the og: code is detected. If there are no OGs set the result will be 0 of 0.

That way you can check how many Open Graphs there is on your installation, which plugin generates the tags and also what data for each tag is set.[/vc_column_text][vc_column_text css=”.vc_custom_1462863918880{margin-bottom: 20px !important;}”]

Activate Easy Social Share Buttons Open Graphs

Go to Social Buttons -> Social Sharing: Sharing Optimization at ESSB settings menu and activate the tags you need. [/vc_column_text][vc_column_text]The first very important step, when setting OGs (not only via ESSB but with any other service or application), is to check if there are any Open Graph tags generated already. One of the most important rules about the OGs is that it is needed just one instance of tag to be generated. To check that follow these steps:[/vc_column_text][vc_single_image image=”2672″ img_size=”full” alignment=”center” onclick=”img_link_large” css=”.vc_custom_1462864208519{margin-bottom: 15px !important;}”][vc_column_text css=”.vc_custom_1462864279096{margin-bottom: 15px !important;}”]All the networks except Twitter read open graph tags. That is why when you turn on Facebook Open Graphs that will work for all networks. To customize Twitter image, title and description (available at view summary under the Tweet) activate Twitter Cards.[/vc_column_text][vc_column_text]

Customize the Open Graphs

After the ESSB Open Graphs are activated under Edit mode of each page/post, where the buttons are displayed, you will find Easy Social Share Buttons: Social Share Optomization section. There you can set the tags for each page.[/vc_column_text][vc_single_image image=”2673″ img_size=”full” alignment=”center” onclick=”img_link_large”][vc_column_text]

Clear the cache

After the tags are filled you have to clear the cache on your installation (if you have cache). Then go to Facebook Debugger Tool to clear the cache of Facebook too.[/vc_column_text][vc_separator][vc_column_text css=”.vc_custom_1462864809432{margin-bottom: 10px !important;}”]More about the debugger tool you can find at:[/vc_column_text][ult_createlink title=”What is Facebook Debugger Tool?” btn_link=”url:https%3A%2F%2Fdocs.socialsharingplugin.com%2Ffacebook-debugger-tool%2F||target:%20_blank” link_hover_style=”Style_4″ text_color=”#39b4ff” text_hovercolor=”#39b4ff” border_color=”#39b4ff” border_size=”1″ text_style=”left” title_font_size=”desktop:18px;”][ult_createlink title=”What is Facebook Advanced Share Feature and How to Use It” btn_link=”url:https%3A%2F%2Fdocs.socialsharingplugin.com%2Ffacebook-advanced%2F||target:%20_blank” link_hover_style=”Style_4″ text_color=”#39b4ff” text_hovercolor=”#39b4ff” border_color=”#39b4ff” border_size=”1″ text_style=”left” title_font_size=”desktop:18px;”][/vc_column][/vc_row]