Open Graph (OG) Metadata Integration
Overview
Metadata is information that's used to describe the data that's contained in something like a web page, document, or file. In other words, metadata is a short explanation or summary of what the data is. By defining Open Graph (og) Meta tags, you can control how your information is transmitted from a website. Metadata (which can include the headline, URL, image and description of the article page) will be pulled in to the Facebook post or other social media when your content is shared.
📘Did you know?
Meta tags only exist in HTML, usually at the “head” of the page, and so are only visible to search engines (and people who know where to look). The “meta” stands for “metadata,” which is the kind of data these tags provide – data about the data on your page.
Why Use This?
Sharing a Native Article can be achieved in two ways: using referral links generated by Nativo or copying the URL of the article from the browser and sharing it directly on social media platforms. With the latter option, the appropriate metadata may not populate the social media post. Utilizing the server-to-server method described below, the correct metadata will be added to the article page in real-time and transferred to the social media post.
Integration
In order to get the correct data sent over to your social shares, you'll need to follow the simple integration steps below:
Implement a server-to-server request to the Nativo ad server (via an API call) so when a user's browser requests a specific sponsored article page, your CMS fires the call and the Nativo ad server will respond with all the necessary metadata. See below for an example.
🚧Keep in mind!
The API request to Nativo’s ad server must take place outside of any page caching.
Sample Request
The example below is how a sample request should be structured. In place of {full_article_url} should be the full URL of the current article, including the Nativo query strings appended to the end.
GET: https://jadserve.postrelease.com/at?articleURL={full_article_url}
Sample Response
The example below is how a successful response will be returned:
XML
<link rel="canonical" href="http://shared.sponsoredcontent.com/article/109407" /> <meta property="og:type" content="article" /> <meta property="og:title" content="[Watch] Funny Video of Celebrity News Anchors Discovering the Internet" /> <meta property="og:description" content="Internet, BMW i3? See what all the buzz is about. #HelloFuture" /> <meta property="og:site_name" content="entrepreneur.com" /> <meta property="og:url" content="http://shared.sponsoredcontent.com/article/109407" /> <meta property="og:image" content="http://ntvassets-a.akamaihd.net/C43FAA6C0DDE4288BF8D0E4B3B1EE79EX.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="[Watch] Funny Video of Celebrity News Anchors Discovering the Internet" /> <meta name="twitter:description" content="Internet, BMW i3? See what all the buzz is about. #HelloFuture" /> <meta name="twitter:url" content="http://shared.sponsoredcontent.com/article/109407" /> <meta name="twitter:image" content="http://ntvassets-a.akamaihd.net/C43FAA6C0DDE4288BF8D0E4B3B1EE79EX.png" />
After the Nativo API returns the requested response, your desired meta tags will need to be embedded into the section of the sponsored article page. Examples below:
An empty header with no meta tags.
Empty header
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Meta tags which are embedded into the header of the sponsored article page.
Meta tags embedded into a header
<!DOCTYPE html> <html> <head> <link rel="canonical" href="http://shared.sponsoredcontent.com/article/109407" /> <meta property="og:type" content="article" /> <meta property="og:title" content="[Watch] Funny Video of Celebrity News Anchors Discovering the Internet" /> <meta property="og:description" content="Internet, BMW i3? See what all the buzz is about. #HelloFuture" /> <meta property="og:site_name" content="entrepreneur.com" /> <meta property="og:url" content="http://shared.sponsoredcontent.com/article/109407" /> <meta property="og:image" content="http://ntvassets-a.akamaihd.net/C43FAA6C0DDE4288BF8D0E4B3B1EE79EX.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="[Watch] Funny Video of Celebrity News Anchors Discovering the Internet" /> <meta name="twitter:description" content="Internet, BMW i3? See what all the buzz is about. #HelloFuture" /> <meta name="twitter:url" content="http://shared.sponsoredcontent.com/article/109407" /> <meta name="twitter:image" content="http://ntvassets-a.akamaihd.net/C43FAA6C0DDE4288BF8D0E4B3B1EE79EX.png" /> </head> <body> </body> </html>
📘Questions?
If you have any questions, feel free to contact your Account Manager or email [email protected].