Reactive `meta`, `link`, and `script` tags

Change meta tags on the fly in Meteor.js apps via flow-router-extra API. This package manages meta tags, script and link via simple router object definitions.

Features:

👷‍♂️ Tinytest suite covers globals, routes, groups, not-found, and application/ld+json;
🎛 Per route, per group, and default (all routes) meta tags;
🎛 Per route, per group, and default (all routes) scripts;
🎛 Per route, per group, and default (all routes) link, like CSS files.

Various ways to set meta, script and link tags, ordered by priority:

FlowRouter.route() [overrides all below]
FlowRouter.group()
FlowRouter.globals
Head template <meta/>, <link/>, <script/> tags [superseded by any above]

Install

meteor add ostrio:flow-router-meta

Compatibility

Meteor >=1.4, including latest Meteor 3.4;
Requires ostrio:flow-router-extra@3.14.0+;
Bundles with ostrio:flow-router-title@3.5.0+.

Note

This package implies ostrio:flow-router-title package.

Demos

ES6 / TypeScript import

import { FlowRouterMeta } from 'meteor/ostrio:flow-router-meta';
// This package implies `ostrio:flow-router-title`; both can be imported in one line:
import { FlowRouterMeta, FlowRouterTitle } from 'meteor/ostrio:flow-router-meta';

TypeScript (with app dependency on ostrio:flow-router-extra so Router types resolve):

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterMeta, FlowRouterTitle } from 'meteor/ostrio:flow-router-meta';

FlowRouter.route('/', {
  name: 'home',
  title: 'Home',
  meta: { description: 'Welcome' },
  action() {},
});

new FlowRouterMeta(FlowRouter);
new FlowRouterTitle(FlowRouter);

Published typings ship as package assets (index.d.ts); with zodern:types in the app, meteor/ostrio:flow-router-meta imports are fully typed. FlowRouterMeta is client-only — construct it from client code (or a client entry) after routes are defined.

AGENTS.md

The repo ships AGENTS.md: a compact implementation map for ostrio:flow-router-title. It complements API in this document.

SKILLS.md

The main ostrio:flow-router-extra package ships a bundled skill at .agents/skills/meteor-flow-router/SKILL.md (covers ostrio:flow-router-extra, ostrio:flow-router-meta, ostrio:flow-router-title). Install into your project with the Skills CLI (npx skills):

# From a Meteor app repo (install into that app’s .agents/skills for Cursor, etc.)
npx skills add veliovgroup/flow-router --skill meteor-flow-router

# Only list skills discovered in the Flow Router repo (no install)
npx skills add veliovgroup/flow-router --list

# User-global Cursor skills dir (~/.cursor/skills)
npx skills add veliovgroup/flow-router --skill meteor-flow-router --agent cursor --global --yes

Related Packages

flow-router-meta performs the best when used with the next packages:

flow-router-title - Change document.title on the fly within FlowRouter-Extra
flow-router-extra - Carefully extended FlowRouter

API

new FlowRouterMeta(FlowRouter) — Registers a triggers.enter handler on the router instance; pass the same FlowRouter object you use for routes.

Together with ostrio:flow-router-extra, you may set the following on FlowRouter.route(), FlowRouter.group(), and FlowRouter.globals (merged in that order — route wins over group over globals):

meta: Object — Object with meta-tags
meta: function(params, qs, data) => object — Method returning object with meta-tags
link: Object — Object with link-tags
link: function(params, qs, data) => object — Method returning object with link-tags
script: Object — Object with script-tags
script: function(params, qs, data) => object — Method returning object with script-tags

Usage

You need to initialize FlowRouterMeta and FlowRouterTitle classes by passing FlowRouter object. Right after creating all your routes:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterMeta, FlowRouterTitle } from 'meteor/ostrio:flow-router-meta';

FlowRouter.route('/', {
  action() { /* ... */ },
  title: 'Title'
  /* ... */
});

new FlowRouterMeta(FlowRouter);
new FlowRouterTitle(FlowRouter);

404 / notFound compatibility

ostrio:flow-router-meta works with both ostrio:flow-router-extra 404 definitions:

Recommended: catch-all route via FlowRouter.route('*', { title, meta, link, script, action })
Legacy/deprecated API: FlowRouter.notFound = { title, meta, link, script, action }

Route options from notFound are supported, including dynamic values/functions.

Basic examples

Set only name and content attributes on meta tag:

FlowRouter.route('/routePath', {
  name: 'routeName',
  meta: {
    name: 'content'
  }
});
// Will generate
// <meta name="name" content="content">

FlowRouter.route('/routePath', {
  name: 'routeName',
  meta: {
    'og:title': 'Page title'
  }
});
// Will generate
// <meta name="og:title" content="Page title">

Set only rel and href attributes on link tag:

FlowRouter.route('/routePath', {
  name: 'routeName',
  link: {
    canonical: 'http://example.com'
  }
});
// Will generate
// <link rel="canonical" href="http://example.com">

FlowRouter.route('/routePath', {
  name: 'routeName',
  link: {
    rel: 'canonical',
    href: 'http://example.com'
  }
});
// Will generate
// <link rel="canonical" href="http://example.com">

Set multiple attributes on meta tag:

FlowRouter.route('/routePath', {
  name: 'routeName',
  meta: {
    uniqueName: {
      name: 'name',
      content: 'value',
      property: 'og:name',
      itemprop: 'name'
    }
  }
});
// Will generate
// <meta name="name" content="value" property="og:name" itemprop="name">

Set multiple attributes on link tag:

FlowRouter.route('/routePath', {
  name: 'routeName',
  link: {
    uniqueName: {
      rel: 'name',
      sizes: 'value',
      href: 'http://value',
      type: 'value-type'
    }
  }
});
// Will generate
// <link rel="name" sizes="value" href="http://value" type="value-type">

ldjson

This method uses special property named innerHTML which set script's content instead of attribute. This method and property can be used in the any other case when you need to set script's contents.

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/fourthPage', {
  name: 'fourthPage',
  title: 'Fourth Page title',
  script: {
    ldjson: {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'http://schema.org/',
        '@type': 'Recipe',
        name: 'Grandma\'s Holiday Apple Pie',
        author: 'Elaine Smith',
        image: 'http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg',
        description: 'A classic apple pie.',
        aggregateRating: {
          '@type': 'AggregateRating',
          ratingValue: '4',
          reviewCount: '276',
          bestRating: '5',
          worstRating: '1'
        }
      })
    }
  },
  action() { /*...*/ }
});

Use function as value

Properties of meta, link, and script tags can be a function that will execute upon navigation

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/routePath', {
  name: 'routeName',
  meta: {
    url: {
      property: 'og:url',
      itemprop: 'url',
      content() {
        return document.location.href;
      }
    }
  },
  link: {
    canonical() {
      return document.location.href;
    }
  }
});

Use function context

data can get passed from data() hook. Read about data hook.

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.route('/post/:_id', {
  name: 'post',
  waitOn(params) {
    return [Meteor.subscribe('post', params._id)];
  },
  async data(params) {
    return await Collection.Posts.findOneAsync(params._id);
  },
  meta: {
    keywords: {
      name: 'keywords',
      itemprop: 'keywords',
      content(params, query, data) {
        return data?.keywords || 'default, key, words';
      }
    }
  },
  title(params, query, data) {
    if (data) {
      return data.title;
    }
    return '404: Page not found';
  }
});

Set CSS and JS per route

Load CSS and JS files on per route and per group basis.

Important

Once CSS or JS is loaded there's no way to "unload" its code. This package will remove tags from head when navigated to other routes, but contents of loaded JS and CSS files will remain in browser's memory

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

// Set default JS and CSS for all routes
FlowRouter.globals.push({
  link: {
    twbs: {
      rel: 'stylesheet',
      href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
    }
  },
  script: {
    twbs: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'
  }
});

// Rewrite default JS and CSS, for second route, via controller:
FlowRouter.route('/secondPage', {
  name: 'secondPage',
  action() {
    return this.render('layout', 'secondPage');
  },
  link: {
    twbs: {
      rel: 'stylesheet',
      href: 'https://maxcdn.bootstrapcdn.com/bootstrap/2.2.0/css/bootstrap.min.css'
    }
  },
  script: {
    twbs: 'https://maxcdn.bootstrapcdn.com/bootstrap/2.2.0/js/bootstrap.min.js'
  }
});

// Unset defaults, via controller:
FlowRouter.route('/secondPage', {
  name: 'secondPage',
  action() {
    return this.render('layout', 'secondPage');
  },
  link: {
    twbs: null
  },
  script: {
    twbs: null
  }
});

// Rewrite default JS and CSS, for route group:
const group = FlowRouter.group({
  link: {
    twbs: {
      rel: 'stylesheet',
      href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css'
    }
  },
  script: {
    twbs: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js'
  }
});

group.route('/groupPage1', {
  name: 'groupPage1',
  action() {
    return this.render('layout', 'groupPage1');
  }
});

Bootstrap configuration

Push default meta, link, or script tags to FlowRouter.globals

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.globals.push({
  meta: {
    // <meta charset="UTF-8">
    charset: {
      charset: 'UTF-8'
    },

    // <meta name="keywords" content="Awes..">
    keywords: {
      name: 'keywords',
      itemprop: 'keywords',
      content: 'Awesome, Meteor, based, app'
    },

    // <meta name="description" itemprop="description" property="og:description" content="Default desc..">
    description: {
      name: 'description',
      itemprop: 'description',
      property: 'og:description',
      content: 'Default description'
    },
    image: {
      name: 'twitter:image',
      itemprop: 'image',
      property: 'og:image',
      content: 'http://example.com'
    },
    'og:type': 'website',
    'og:title'() {
      return document.title;
    },
    'og:site_name': 'My Awesome Site',
    url: {
      property: 'og:url',
      itemprop: 'url',
      content() {
        return window.location.href;
      }
    },
    'twitter:card': 'summary',
    'twitter:title'() {
      return document.title;
    },
    'twitter:description': 'Default description',
    'twitter:site': {
      name: 'twitter:site',
      value: '@twitterAccountName'
    },
    'twitter:creator': {
      name: 'twitter:creator',
      value: '@twitterAccountName'
    },
    'http-equiv': {
      'http-equiv': 'X-UA-Compatible',
      content: 'IE=edge,chrome=1'
    },
    robots: 'index, follow',
    google: 'notranslate'
  },
  link: {
    // <link href="https://maxcdn.bootstrapcdn.com/..." rel="stylesheet">
    stylesheet: 'https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css',

    // <link rel="canonical" href="http://example.com">
    canonical() {
      return document.location.href;
    },

    // <link rel="image" sizes="500x500" href="http://example.com">
    image: {
      rel: 'image',
      sizes: '500x500',
      href: 'http://example.com'
    },
    publisher: 'http://plus.google...',
    'shortcut icon': {
      rel: 'shortcut icon',
      type: 'image/x-icon',
      href: 'http://example.com'
    },
    'icon': {
      rel: 'icon',
      type: 'image/png',
      href: 'http://example.com'
    },
    'apple-touch-icon-144': {
      rel: 'apple-touch-icon',
      sizes: '144x144',
      href: 'http://example.com'
    },
    'apple-touch-icon-114': {
      rel: 'apple-touch-icon',
      sizes: '114x114',
      href: 'http://example.com'
    },
    'apple-touch-icon-72': {
      rel: 'apple-touch-icon',
      sizes: '72x72',
      href: 'http://example.com'
    },
    'apple-touch-icon-57': {
      rel: 'apple-touch-icon',
      sizes: '57x57',
      href: 'http://example.com'
    }
  },
  script: {
    twbs: 'https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js',
    d3: {
      src: 'https://d3js.org/d3.v3.min.js',
      charset: 'utf-8'
    }
  }
});

Running Tests

Clone this package
In Terminal (Console) go to directory where package is cloned
Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-meta-tests" meteor test-packages ./ --port 8888

Support this project:

Upload and share files using ☄️ meteor-files.com — Continue interrupted file uploads without losing any progress. There is nothing that will stop Meteor from delivering your file to the desired destination
Use ▲ ostr.io for Server Monitoring, Web Analytics, WebSec, Web-CRON and SEO Pre-rendering of a website
Star on GitHub
Star on Atmosphere
Sponsor via GitHub
Support via PayPal

Name		Name	Last commit message	Last commit date
Latest commit History 100 Commits
.github		.github
demo		demo
tsd-stubs		tsd-stubs
.cursorignore		.cursorignore
.gitignore		.gitignore
.meteorignore		.meteorignore
.versions		.versions
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
HISTORY.md		HISTORY.md
LICENSE		LICENSE
README.md		README.md
flow-router-meta.js		flow-router-meta.js
index.d.ts		index.d.ts
index.test-d.ts		index.test-d.ts
package-lock.json		package-lock.json
package-types.json		package-types.json
package.js		package.js
package.json		package.json
tests.js		tests.js
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Reactive `meta`, `link`, and `script` tags

Features:

ToC

Install

Compatibility

Demos

ES6 / TypeScript import

AGENTS.md

SKILLS.md

Related Packages

API

Usage

404 / notFound compatibility

Basic examples

ldjson

Use function as value

Use function context

Set CSS and JS per route

Bootstrap configuration

Running Tests

Meteor/Tinytest

Support this project:

About

Uh oh!

Releases 34

Sponsor this project

Uh oh!

Contributors

Uh oh!

Languages

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Reactive meta, link, and script tags

Features:

ToC

Install

Compatibility

Demos

ES6 / TypeScript import

AGENTS.md

SKILLS.md

Related Packages

API

Usage

404 / notFound compatibility

Basic examples

ldjson

Use function as value

Use function context

Set CSS and JS per route

Bootstrap configuration

Running Tests

Meteor/Tinytest

Support this project:

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 34

Sponsor this project

Uh oh!

Contributors

Uh oh!

Languages

Reactive `meta`, `link`, and `script` tags