JSPM

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

HTML document head management including meta tags, social media tags, icons and JSONLD expressions across devices.

Package Exports

  • metapatcher

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (metapatcher) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

metapatcher

HTML document head management tool with declarative api. Inject/remove meta tags, icons, social media tags, JSONLD expressions and many more.

NPM npm version npm bundle size npm

Install

npm install metapatcher

Import

There are different types of distributions depending on your use case. Essentially, the package can be imported via require:

const metapatcher = require('metapatcher')

or via script tag:

<script src="https://cdn.jsdelivr.net/npm/basekits@1/dist/basekits.iife.js" crossorigin type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/dom-scripter@2/dist/dom-scripter.iife.js" crossorigin type="text/javascript"></script>

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

but there are lots of other options. See distribution report below.

Use

Init

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'
})

Distributions Report

This is an auto-generated report that shows the type, name and size of the bundles available to use individually.

[
  "metapatcher.amd.js (9.28 KB)",
  "metapatcher.amd.polyfilled.js (30.82 KB)",
  "metapatcher.cjs.js (9.29 KB)",
  "metapatcher.cjs.polyfilled.js (30.85 KB)",
  "metapatcher.es.js (8.74 KB)",
  "metapatcher.es.polyfilled.js (30.30 KB)",
  "metapatcher.iife.js (9.28 KB)",
  "metapatcher.iife.polyfilled.js (30.81 KB)",
  "metapatcher.umd.js (9.55 KB)",
  "metapatcher.umd.polyfilled.js (31.09 KB)"
]

Babel Polyfills Report

This is an auto-generated report that shows the pollyfils added by core-js to the pollyfilled distributions based on the targets configuration described below.

// polyfills:
[
  "es.symbol",
  "es.symbol.description",
  "es.symbol.iterator",
  "es.array.iterator",
  "es.object.get-prototype-of",
  "es.object.set-prototype-of",
  "es.object.to-string",
  "es.reflect.construct",
  "es.regexp.to-string",
  "es.string.iterator",
  "web.dom-collections.iterator",
  "es.array.index-of",
  "es.array.last-index-of",
  "es.array.map",
  "es.array.reduce",
  "es.array.slice",
  "es.function.name",
  "es.object.assign",
  "es.object.keys",
  "es.object.values",
  "es.regexp.exec",
  "es.string.match",
  "es.string.replace"
]
// based on the targets:
{
  "chrome": "49",
  "edge": "18",
  "firefox": "52",
  "ie": "10",
  "ios": "9.3",
  "opera": "68",
  "safari": "5.1",
  "samsung": "4"
}

Thanks for watching 🐬

ko-fi