https://github.com/useflyyer/flyyer-opengraph-properties

Convert meta-tags into an object with accessor. Supports single and multiple tags via pluralization.
https://github.com/useflyyer/flyyer-opengraph-properties

flyyer html meta-tags og-image open-graph seo twitter-cards typescript

Last synced: 1 day ago
JSON representation

Convert meta-tags into an object with accessor. Supports single and multiple tags via pluralization.

• Host: GitHub
• URL: https://github.com/useflyyer/flyyer-opengraph-properties
• Owner: useflyyer
• Created: 2021-05-01T23:49:29.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:09:51.000Z (almost 2 years ago)
• Last Synced: 2024-11-01T08:34:43.306Z (14 days ago)
• Topics: flyyer, html, meta-tags, og-image, open-graph, seo, twitter-cards, typescript
• Language: TypeScript
• Homepage: https://flyyer.io
• Size: 878 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @flyyer/opengraph-properties

Convert meta-tags into a object with accessor. Supports single and multiple tags via [pluralization](https://github.com/plurals/pluralize).

```sh

yarn add @flyyer/opengraph-properties

```

## Usage

```ts

import { parseMetaTags, MetaTag, extractString, extractNumber } from "@flyyer/opengraph-properties";

import * as cheerio from "cheerio";

const raw = `

  

  

  

  

  

  

`;

// means there are 3 images on this page, the first image is 300x300, the middle one has unspecified dimensions, and the last one is 1000px tall.

const $ = cheerio.load(raw);

const metatags: MetaTag[] = Array.from($("meta"), (meta) => meta.attribs);

const parsed = parseMetaTags(metatags, {

  // Convert `name` or `property` key to lowercase and trim whitespace.

  normalizeKey: true,

  // Trim white space from `content`.

  normalizeValue: true,

});

// First appearance take precedence.

extractString(parsed.og["image"]) === "https://example.com/rock.jpg";

extractNumber(parsed.og["image"]["width"]) === 300;

extractNumber(parsed.og["image"]["height"]) === 300;

// A pluralized key is always created to handle multiple appearances.

extractString(parsed.og["images"][0]) === "https://example.com/rock.jpg";

extractNumber(parsed.og["images"][0]["width"]) === 300;

extractNumber(parsed.og["images"][0]["height"]) === 300;

extractString(parsed.og["images"][1]) === "https://example.com/rock2.jpg";

extractString(parsed.og["images"][2]) === "https://example.com/rock3.jpg";

extractNumber(parsed.og["images"][2]["height"]) === 1000;

```

Undeclared properties are `undefined`.

```ts

extractNumber(parsed.og["images"][2]["width"]) === undefined

```

Also a property accessor can be used as second argument.

```ts

extractNumber(parsed.og, "images.2.height") === 1000;

extractNumber(parsed.og, ["images", 2, "height"]) === 1000;

```

### LiquidJS

Can be used with [liquidjs](https://github.com/harttle/liquidjs).

```ts

import { parseMetaTags, MetaTag, extractString, extractNumber } from "@flyyer/opengraph-properties";

import { Liquid } from "liquidjs";

const metatags: MetaTag[] = [

  {

    property: "og:audio",

    content: "https://example.com/bond/theme.mp3",

  },

  {

    property: "og:locale",

    content: "en_GB",

  },

  {

    property: "og:locale:alternate",

    content: "fr_FR",

  },

  {

    property: "og:locale:alternate",

    content: "es_ES",

  },

];

const parsed = parseMetaTags(metatags);

const engine = new Liquid({ globals: parsed });

const print = engine.parseAndRenderSync(`

  Listening to {{ og.audio }} in {{ og.locale }}

  Available locales:

  {% for locale in og.locale.alternates %}

    Language: {{ locale }}

  {% endfor %}

`);

console.log(print);

```

Will print:

```txt

Listening to https://example.com/bond/theme.mp3 in en_GB

Available locales:

Language: fr_FR

Language: es_ES

```