Extra HTML meta data tags in generated links

Asked on February 6, 2017 in Technical.

We are using branch to generate dynamic links for our application. We are using these links on various social media platforms. Branch configuration options enables us to populate fixed set of open graph data. In case of videos it lets us set “og:video" but there is no way to set “og:video:type". Due to this, video embedding doesn’t work if you are using HTML5 videos as the default video-type for Facebook is “application/x-shockwave-flash".

I tried passing extra data while configuring link but it doesn’t translate to HTML meta tags that are scrapped by Facebook.

I tried setting this data on fallback url but it is not picked from there as well.

Plystash — Developer
2 Answer(s)
Answered on February 6, 2017.

Hi Sunil – thanks for posting the question. I’ve looped in our integrations team to have a look into this. Thanks!

Developer
Answered on February 7, 2017.
When a Branch link is scraped, Branch will return: 1st: any parameters that have been defined for the link; 2nd: any parameters that have not been defined for the link but that have been defined at the app level (in Social Media Display Customization on the Link Settings page); and finally: any meta tags present on the web site specified in the Default URL ($fallback_url) page.
Thus, even though the Branch does not provide an explicit parameter for defining og:video:type, you should be able accomplish this by adding the meta tag to the web page you use as your $fallback_url.
Here is an example:
I start with the following link “https://ogt1.app.link/fallbackurltags” where I have set the parameters below (note that “” is shown because I did not set any OG parameters for the link). Note that I have set the $fallback_url:
{
"$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 seet anywhere on the Branch dashboard or as a link parameter.
I have added meta tags, however, to a simple web site I have created and assigned as the $fallback_url: https://dwestgate.github.io/ExampleFallBackURL/. Here is that web page:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="title" content="Tag set by Fallback URL" />
  <meta name="description" content="Tag set by Fallback URL" />
  <meta property="og:title" content="Tag set by Fallback URL" />
  <meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" />
  <meta property="og:video:type" content="application/x-shockwave-flash" />
  <meta property="og:video:width" content="160" />
  <meta property="og:video:height" content="90" />
  <title>Fallback URL with meta tags</title>
</head>
<body>
  <h1>All the action is in the meta tags - View Source</h1>
</body>
</html>
When I now browse to Facebook’s Sharing Debugger (here: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Ffallbackurltags) – voila: the og:video:type tag from that web page has been scraped. You can see the raw tags returned by clicking on the “Show All Raw Tags” button.
One thing that I did not mention that may screw things up: if there is a value provided for $og_url, only the tags for the website provided in this value will be present. 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 again (here: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Flinktags):
<meta charset="utf-8" />
<meta name="title" content="Tag set by Fallback URL" />
<meta name="description" content="Tag set by Fallback URL" />
<meta property="og:title" content="Tag set by Fallback URL" />
<meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="160" />
<meta property="og:video:height" content="90" />
I hope this provides sufficient clarity to allow you to populate whatever custom OG tags are needed.
Developer