meta-tags

Generate Open Graph meta tags and Cloudinary image URLs for social media previews.

Contents

• Install
• CLI
  • Output placeholder meta tags
  • Generate a Cloudinary image URL
• API
  • MetaImage
  • metas
• Example
• Modules
  • ESM
  • Common JS
  • pre-built JS

Install

npm i -S @substrate-system/meta-tags

CLI

Run with npx if it is installed locally.

npx metas

Output placeholder meta tags

Run without arguments to output all meta tags with placeholder values.

npx metas

<meta property="og:title" content="placeholder" />
<meta property="og:type" content="placeholder" />
<meta property="og:site_name" content="placeholder" />
<meta property="og:url" name="og:url" content="placeholder" />
<meta property="og:image" content="placeholder" />
<meta property="og:description" content="placeholder" name="description" />

Generate a Cloudinary image URL

Use the image command to generate a Cloudinary meta image URL:

npx @substrate-system/meta-tags image --cloud-name mycloud --filename image.jpg

# https://res.cloudinary.com/mycloud/image/upload/w_1200,h_627,c_fit,q_auto,f_auto/image.jpg

With a text overlay:

npx @substrate-system/meta-tags image -c mycloud -f image.jpg -t "Hello World"

Options

Option	Alias	Description	Required
--cloud-name	-c	Cloudinary cloud name	Yes
--filename	-f	Image filename (including extension)	Yes
--text	-t	Optional text overlay	No

API

MetaImage

Use Cloudinary to generate an image URL optimized for Open Graph meta tags. Creates 1200x627px images.

function MetaImage ({ cloudName, filename, text }:{
    cloudName:string;
    filename:string;
    text?:string;
}):string

Without text overlay

import { MetaImage } from '@substrate-system/meta-tags'

const imageUrl = MetaImage({
    cloudName: 'my-cloud',
    filename: 'my-image.jpg'
})
// => https://res.cloudinary.com/my-cloud/image/upload/w_1200,h_627,c_fit,q_auto,f_auto/my-image.jpg

With text overlay

When text is provided, creates a 1200x800px canvas with:

• 50px top padding
• Image fitted to 1200x500px
• White background
• Text overlay positioned at the bottom

const imageUrl = MetaImage({
    cloudName: 'my-cloud',
    filename: 'cube.png',
    text: 'Hello World'
})
// Generates a URL with text overlay

metas

Generate an array of Open Graph meta tag strings.

function metas (opts:{
    title:string;
    description:string;
    image?:string;
    type?:string;
    name?:string;
    url?:string;
}):string[]

Example

import { metas } from '@substrate-system/meta-tags'

const metaTags = metas({
    title: 'My Page Title',
    description: 'A description of my page',
    image: 'https://example.com/image.jpg',
    type: 'website',
    name: 'My Site Name',
    url: 'https://example.com/page'
})

Example

Generate meta tags with a Cloudinary image:

import { MetaImage, metas } from '@substrate-system/meta-tags'

const imageUrl = MetaImage({
    cloudName: 'my-cloud',
    filename: 'banner.jpg',
    text: 'Welcome to My Site'
})

const metaTags = metas({
    title: 'My Awesome Page',
    description: 'Learn about awesome things',
    image: imageUrl,
    type: 'website',
    url: 'https://example.com'
})

// Insert into your HTML
metaTags.forEach(tag => {
    // Append to document head or use server-side
})

Modules

This exposes ESM and common JS via package.json exports field.

ESM

import { MetaImage, metas } from '@substrate-system/meta-tags'

Common JS

const { MetaImage, metas } = require('@substrate-system/meta-tags')

pre-built JS

This package exposes minified JS files. Copy them to a location accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/meta-tags/dist/index.min.js ./public/meta-tags.min.js

HTML

<script type="module" src="./meta-tags.min.js"></script>