How to Get Open Graph Data

loading views

At Futureland we want to support link previews like on Twitter or other social networks. One of our goals is to increase the share frequency on our platform. So basically making sharing stuff as easy and fast as possible. One thing that someone might want to share is a link. For example to a new blog or Twitter post or a Youtube video. Like everything else you can share on Futureland, links should be no exception and should always be displayed in a pretty way including an image or a video.

What do we need to generate pretty link previews? The same data everyone else needs. That is why we expose some robot friendly meta data on all of our Futureland pages. This information includes data about your profiles, projects and outputs. We expose this data by using the Open Graph Protocol. Every modern website uses this protocol to provide third party services with data about their service. This data is used to generate pretty previews of your links in Slack, Telegram, Twitter and so on.

The format of that meta data are standardized HTML tags and should appear in the <head> section of an website.

On Futureland these tags look something like this:

<head>
    ...
    <meta property="og:title" content="lucas - Futureland" />
    <meta
        property="og:description"
        content="Making some small improvements to profiles. Adjusting spacing of key information and adding a space for a url."
    />
    <meta
        property="og:image"
        content="https://cdn.futureland.tv/app/internetvin/549/thumbnail_A5xKReffB5dLcY0fSUtGJ.png"
    />
    <meta property="og:image:width" content="3584" />
    <meta property="og:image:height" content="2278" />
    ...
</head>

As you can see we give those services some basic information about our page. This is enough to render a nice link preview including an image thumbnail.

For Futureland to be able to create beautiful link previews we first have to make a request to the URL the preview should be generated for.

After we do that we can query all of the Open Graph Data if it exists. Then we save the corresponding data and files for later. That means we download every image and video to our server and save the rest of the information in our database.

Since we now have all the required data to generate a fancy link preview we are done.

Node.js

There is a handy Node.js library called open-graph-scraper that you can use to obtain Open Graph Data easily.

const ogs = require('open-graph-scraper')

const { data } = await ogs({ url: 'https://futureland.tv' })

/*
{
    ogImage: 'https://cdn.futureland.tv/Images/project%20_grid.jpg',
    ogTitle: 'Futureland',
    ogDescription:
        'A time machine, feedback engine, and fund for your projects.',
    ogUrl: 'https://futureland.tv',
}
*/