Skip to main content

Open Graph and Social Media Metadata for Deno

Fetches and parses data from website to get their OpenGraph metadata

Usage

import { getOGTags, getTwitterTags, getMetaTags } from "https://deno.land/x/opengraph/mod.ts";
// also possible with import * as og from './mod.ts'

// Returns a promise that resolves to an object with the OpenGraph metadata
console.log(await getOGTags('https://deno.land'))
// {
//   title: "Deno, The next-generation JavaScript runtime",
//   description: "Deno features improved security, performance, and developer experience compared to its predecessor. "... 65 more characters,
//   image: {
//     content: "https://deno.com/og/image.png",
//     alt: "A logo of a sauropod in the rain and the word Deno"
//   },
//   type: "website",
//   site_name: "Deno",
//   locale: "en_US"
// }

// Returns a promise that resolves to an object with the Twitter metadata
console.log(await getTwitterTags('https://deno.land'))
// {
//   card: "summary_large_image",
//   site: "@deno_land",
//   title: "Deno, The next-generation JavaScript runtime",
//   description: "Deno features improved security, performance, and developer experience compared to its predecessor. "... 65 more characters,
//   image: {
//     content: "https://deno.com/og/image.png",
//     alt: "A logo of a sauropod in the rain and the word Deno"
//   }
// }

// Returns a promise that resolves to an object with all the metatags that have a name or property attribute
console.log(await getMetaTags('https://deno.land'))
// {
//   viewport: "width=device-width, initial-scale=1.0",
//   robots: "index, follow",
//   twitter: {
//     card: "summary_large_image",
//     site: "@deno_land",
//     title: "Deno, The next-generation JavaScript runtime",
//     description: "Deno features improved security, performance, and developer experience compared to its predecessor. "... 65 more characters,
//     image: "A logo of a sauropod in the rain and the word Deno",
//     alt: "A logo of a sauropod in the rain and the word Deno"
//   },
//   og: {
//     title: "Deno, The next-generation JavaScript runtime",
//     description: "Deno features improved security, performance, and developer experience compared to its predecessor. "... 65 more characters,
//     image: "A logo of a sauropod in the rain and the word Deno",
//     alt: "A logo of a sauropod in the rain and the word Deno",
//     type: "website",
//     site_name: "Deno",
//     locale: "en_US"
//   },
//   description: "Deno features improved security, performance, and developer experience compared to its predecessor. "... 65 more characters,
//   keywords: "deno, denoland, development, javascript, typescript, webassembly, wasm"
// }

Usage with parsed HTML

This lib uses deno-dom to parse the HTML, but you can also pass a parsed HTML document to the functions. If you do that, the lib will not fetch the HTML and will only parse the document you passed.

import { getOGTags, getTwitterTags, getMetaTags } from "https://deno.land/x/opengraph/mod.ts";
import { parse } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";

const html = await fetch('https://deno.land').then(res => res.text());

console.log(await getOGTags(html)) // same result

Limitations

OpenGraph is a long specification with several tags, some of them are nested and this lib will try to parse the nested ones so they form a nice object with all the data. However it does only support two levels of nesting. If you find a website with tags such as og:music:album:disc, the tag will be parsed incorrectly. This support is planned for the future.

OpenGraph also has support for arrays, but this lib does not support them yet.