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.