JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 42
  • Score
    100M100P100Q61089F
  • License MIT

Device aware HTML document head management including meta tags, social media tags, icons and JSONLD expressions.

Package Exports

  • metapatcher
  • metapatcher/browser

Readme

metapatcher

Device aware HTML document head management including meta tags, social media tags, icons and JSONLD expressions. Now its compatible with server environments!

NPM npm version npm bundle size npm

Install

npm install metapatcher

Import

Require or import:

const metapatcher = require('metapatcher')
// or
import metapatcher from 'metapatcher'

Or inject via <script> tag:

<script src="https://cdn.jsdelivr.net/npm/metapatcher@2/dist/metapatcher.iife.js" crossorigin type="text/javascript"></script>

Accessible at window.metapatcher.

Usage

Configure

Apply settings upon initiation:

// these are default settings
const settings = {
  structuredData: {enabled: true},
  androidChromeIcons: {enabled: true},
  msTags: {enabled: true},
  safariTags: {enabled: true},
  appleTags: {enabled: true},
  openGraphTags: {enabled: true},
  twitterTags: {enabled: true},
  facebookTags: {enabled: true}
}
metapatcher.configure(settings)

Essential Methods

// injects favicon and returns the dom element
metapatcher.setFavicon('/path/favicon.ico')

// set application name, url and logo across devices and browsers
// returns self
metapatcher.setProjectMeta({
  name: 'Sample App',
  url: 'https://frondjs.org',
  logo: '/path/logo.png',
  primaryColor: '#333333',
  backgroundColor: '#ffffff'
})

// set robots directives, returns the node element
metapatcher.robots('noindex')
metapatcher.robots('index, nofollow')
// reference for google can be found at:
// https://developers.google.com/search/reference/robots_meta_tag

// prioritize loading resources, returns the node element
metapatcher.prioritize('https://frondjs.org', 'preconnect')
metapatcher.prioritize('https://frondjs.org', 'dns-prefetch')
metapatcher.prioritize('/some/page', 'prefetch')
metapatcher.prioritize('/some/path/sample.css', 'preload')
// remove all prioritizations
metapatcher.removeAllPrioritizations()

// document title, meta name and description, social media, canonical, hreflang
// and other applicable tags
// returns self
metapatcher.setPageMeta({
  title: 'Home',
  description: 'This is home.',
  url: 'https://frondjs.org',
  image: '/path/cover.jpg',
  locale: 'tr_TR',
  localVersions: {
    'en_US': 'https://frondjs.org/en-us'
  },
  canonicals: [
    'https://www.frondjs.org'
  ]
})

// if you would like to patch canonicals seperately
metapatcher.setCanonical('https://www.frondjs.org') // returns element
metapatcher.setCanonical('https://www.frondjs.org/home')
// and remove all of them
metapatcher.removeAllCanonicals() // returns self

// if you would like to patch local version tags seperately
metapatcher.setLocalVersion('tr_TR', url, isActiveLocale = false) // returns self
// isActiveLocale indicates that the locale in the first argument is
// equal to the current locale of the page
metapatcher.setLocalVersion('en_US', url2, true)
// and remove all
metapatcher.removeAllLocalVersions()

Flexible

Learn .set method to patch custom meta or link tags.

const elem = metapatcher.set(tag, identifierAttr = undefined, attrs = {})
  • tag is meta or link.
  • identifierAttr causes to remove any existing tags based on the identifierAttr=attrs[identifierAttr] match.
  • attrs is regular html attributes.
// three example below will create meta name=$1 content=$2 tags.
metapatcher.set('meta', 'name', {name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover'})
metapatcher.set('meta', 'name', {name: 'manifest', content: '/manifest.json'})
metapatcher.set('meta', 'name', {name: 'msapplication-config', content: '/path/msconfig.xml'})

// the example below will create link rel=$1 href=$2 tag.
metapatcher.set('link', undefined, {rel: 'stylesheet', href: '/path/style.css'})

// disable chrome auto-translate recommendation
metapatcher.set('meta', undefined, {name: 'google', content: 'notranslate'})

An array of objects in the right order can be converted a valid structured data format:

const data = [
  {title: 'Home', url: 'https://www.frondjs.org'},
  {title: 'About', url: 'https://www.frondjs.org/about'}
]
metapatcher.breadcrumb(data) // returns self

Icons

Icons handled specially. There are various platform spesific icon sizes and specifications across browsers and devices. Metapatcher can cover all of it if you can give your icons in the format below:

const icons = [
  '/path/icon-72x72.png',
  '/path/icon-180x180.png'
  // ...
  // /path/icon-[size].[ext]
]
metapatcher.setIcons(icons)

Platform Specific Methods

metapatcher.setSafariMobileWebApp({
  name: 'Sample App', // already set with .setProjectMeta
  statusBarStyle: 'black-translucent'
})
metapatcher.setSafariPinnedTab('/path/pinned-tab-icon.svg', '#000000')

metapatcher.setFacebookMeta({
  appID: ''
})

metapatcher.setTwitterMeta({
  card: 'summary_large_image',
  site: '@twitter',
  creator: '@muratgozel'
})

Server Environment Compatibility

On server env, where window and document not available, the module creates string versions of html tags so you can create the html document by using the dump method:

const html1 = metapatcher.set('meta', 'name', {name: 'number', content: 'One'})
const html2 = metapatcher.set('meta', undefined, {name: 'names', content: 'One'})
const html3 = metapatcher.set('meta', undefined, {name: 'names', content: 'Two'})

const dump = metapatcher.dump()
/*
<meta id="name" name="msapplication-config" content="none">
<meta id="name" name="number" content="One">
<meta name="names" content="One">
<meta name="names" content="Two">
 */

Version management of this repository done by releaser 🚀

Thanks for watching 🐬

ko-fi