Overview


Social Media Tags, a.k.a. OG tags, are used to display content as a preview card in Facebook, Twitter, Pinterest, and etc.


Basic OG tags : 

$og_title : Set the title of the link as it will be seen in social media displays

$og_description : Set the description of the link as it will be seen in social media displays

$og_image_url : Set the image of the link as it will be seen in social media displays

Here is a list of all the OG tags along with the appropriate definitions 


Branch allows you to customize your social media tag on account and on per-link basis. When a Branch link is scraped, Branch returns 3 specific set of parameters

  1. Any parameter that has been defined for the link (either from the dashboard or the SDK)

  2. Parameter which have been defined at an App level e.g Social Media Display Customization on the Link Settings page

  3. Meta tags present on the web page you use as your $fallback_url or Meta tags present on the corresponding web URL you used to create the short link from the dashboard.

 

What are the different Social Media Tags which can added to a Branch Link?


Ultimate Guide to Add Social Media Tags

Creating links via Dashboard (Quick Links)

  • While creating a link from the dashboard the OG tags are scraped from the corresponding URL we mention at the first step of link creation (a.k.a canonical url) 


  • These OG values can also be edited from the Social Media tab at the time of configuring the link. 

  • In case of no canonical url, we pull the default OG tags from the fallback_url as defined in the link settings.


Adding OG tags to a Branch link create via SDK

These tags can be added with the Branch Universal Object at the time of creating a shortlink 


BranchUniversalObject buo = new BranchUniversalObject()
    .setCanonicalIdentifier("content/12345")
    .setTitle("My Content Title")
    .setContentDescription("My Content Description")
    .setContentImageUrl("https://lorempixel.com/400/400")
    .setContentIndexingMode(BranchUniversalObject.CONTENT_INDEX_MODE.PUBLIC)
    .setLocalIndexingMode(BranchUniversalObject.CONTENT_INDEX_MODE.PUBLIC)
    .setContentMetadata(new ContentMetadata().addCustomMetadata("key1",   "value1"));


Here the following methods define the OG title, description and URL respectively  .setTitle , .setContentDescription and the .setContentImageUrl


Understanding “ Order of Precedence “ of parameters for Social Media displays


  • Social media tags tracked with the canonical URL ($canonical_url) take precedence over the meta tags present with the default URL (i.e $fallback_url) or the Social Media Display Customization settings on the dashboard.  


Let’s try to understand this from an example 


Let’s start with the following link "https://ogt1.app.link/fallbackurltags" where the below mentioned parameters are set 

(Note: " " is shown where we haven’t set any value for the respective). Also a keen look will show that the $fallback_url is set here


{

"$desktop_deepview": "",

"$desktop_url": "",

"$fallback_url": "https://dwestgate.github.io/ExampleFallBackURL/",

"$marketing_title": "OG Tag Testing - fallback URL tags",

"$og_description": "",

"$og_image_url": "",

"$og_title": "",

"$one_time_use": "",

"~creation_source": 1,

"~feature": "marketing",

"~id": "357178398369800081",

"~marketing": true

}


"og:video:type=application/x-shockwave-flash" has not been set anywhere on the Branch dashboard or as a link parameter.


However, this is added as a meta tag web site, which is also the $fallback_url in the above payload https://dwestgate.github.io/ExampleFallBackURL/.


When browsing to Facebook Object Debugger - the og:video:type tag from that web page is scraped ( You can see the raw tags returned by clicking on the "Show All Raw Tags" button)

However, if there is a value provided for $og_url with the link data then only the tags for the URL mentioned as $og_url will be scraped. 


The link https://ogt1.app.link/linktags, for example, has the following parameters:

{

"$marketing_title": "OG Tag Testing - per-link tags",

"$og_description": "OG Tags set at the link level",

"$og_image_height": "200",

"$og_image_url": "https://cdn.branch.io/branch-assets/1486394827408-og_image.png",

"$og_image_width": "200",

"$og_title": "Per-Link tags",

"$og_url": "https://dwestgate.github.io/ExampleFallBackURL/",

"$og_video": "https://www.youtube.com/v/CsGYh8AacgY",

"$og_video_height": "180",

"$og_video_width": "320",

"$one_time_use": "",

"~creation_source": 1,

"~feature": "marketing",

"~id": "357170874539266599",

"~marketing": true

}

In this situation the link parameters get overridden by the parameters in $og_url, as can be seen by checking the Facebook Sharing Debugger.



SOURCES

https://developers.facebook.com/tools/debug/sharing/

https://docs.branch.io/pages/links/integrate/#social-link-behavior

https://docs.branch.io/pages/links/integrate/#open-graph