Meteor - Setting the document title

Question

Is there a way to change the <title> element in a Meteor app? Seems templates are only processed in the <body>.

score 45 · Accepted Answer · answered Dec 26 '12 at 09:46

45

Pretty much anywhere in your client-side JavaScript code:

document.title = "My new title";

answered Dec 26 '12 at 09:46

David Wihl

1,491
13
14

score 38 · Answer 2 · answered Sep 04 '14 at 05:03

38

You can extend David Wihl's solution:

Deps.autorun(function(){
  document.title = Session.get("DocumentTitle");
});

Then You can in any time call:

Session.set("DocumentTitle","New Document Title");

answered Sep 04 '14 at 05:03

KNOFF

441
4
4

Same as suggested here https://github.com/oortcloud/unofficial-meteor-faq#how-do-i-get-reactive-html-in-the-head-tag – jefeman Dec 04 '14 at 02:49

jrbedard · Answer 3 · 2015-02-09T18:42:59.320

If you use iron:router you can add the package manuelschoebel:ms-seo to handle the title along with meta tags. This is useful for static and dynamic SEO data:

Router.map(function() {
  return this.route('blogPost', {
    path: '/blog/:slug',

    onAfterAction: function() {
      var post = this.data().post;
      SEO.set({
        title: post.title,
        meta: {
          'description': post.description
        },
        og: {
          'title': post.title,
          'description': post.description
        }
      });
    }
  });
});

score 10 · Answer 4 · edited Nov 11 '14 at 06:49

You can create a helper for setting the title (CoffeeScript):

UI.registerHelper "setTitle", ->
  title = ""
  for i in [0..arguments.length-2]
    title += arguments[i]
  document.title = title
  undefined

or the same in Js:

UI.registerHelper("setTitle", function() {
  var title = "";
  for (var i = 0; i < arguments.length - 1; ++i) {
    title += arguments[i];
  }
  document.title = title;
});

Then you can use it in complex ways, and it will be reactive:

{{#if book}}
  {{setTitle book.title}}
{{else}}
  {{setTitle "My books"}}
{{/if}}

score 8 · Answer 5 · answered Oct 07 '14 at 16:21

I find it more convenient to handle that kind of thing directly in the router with a onBeforeAction:

Router.map(function() {
  return this.route('StudioRoot', {
    path: '/',
    onBeforeAction: function() {
      return document.title = "My Awesome Meteor Application";
    }
  });
});

score 3 · Answer 6 · answered Nov 05 '14 at 09:40

3

you can also include in <head> </head> tags which does not reside in a template. try this:

contents of sample.html:

<head>
    <title>my title</title>
</head>

<body>
    ...
</body>

<template name="mytemplate">
    ...
</template>

answered Nov 05 '14 at 09:40

gok

39
1

Leths · Answer 7 · 2015-08-06T15:52:09.290

1

What I ended up doing:

in the Meteor.isClient:

Meteor.startup(function() {
    Deps.autorun(function() {
        document.title = Session.get('documentTitle');
    });
});

now that the var is set reactively, go in the router file (if not already done: meteor add iron:router. My router file is both client and server)

Router.route('/', {
    name: 'nameOfYourTemplate',
    onBeforeAction: function () {
        Session.set('documentTitle', 'whateverTitleIWant');
        this.next();    //Otherwise I would get no template displayed
    }
});

It doesn't matter if you already set a title in the head tag. It will be replaced by this one according to your route.

edited Aug 06 '15 at 15:52

answered Aug 06 '15 at 12:29

Leths

111
3

May not matter to some, but Session variables will not survive a page refresh. – D Durham Sep 22 '15 at 16:02
1

@Durham, on a refresh the route will be run again. – BudgieInWA Oct 23 '15 at 05:20

score -1 · Answer 8 · answered Dec 19 '15 at 16:01

I had to look for an answer that would work for ui-router. I know that this might not be the answer you were looking for. Since this question was posted about 2 years ago, I figured if someone else was to come here looking for a solution with ui-router, this answer could help them:

myApp.run.js

(function() {
  'use strict';

  angular
    .module('myApp')
    .run(run);

  run.$inject = ['$rootScope', '$state'];

  function run($rootScope, $state) {
    $rootScope.$on("$stateChangeSuccess", function(previousRoute, currentRoute){
      document.title = 'myApp - ' + currentRoute.data.pageTitle;
    });
  };

})();

routes.js

(function() {
    'use strict';

    angular
      .module('myApp')
      .config(config);

    config.$inject = 
      ['$urlRouterProvider', '$stateProvider', '$locationProvider'];

    function config($urlRouterProvider, $stateProvider) {

        // ...
        $stateProvider
          .state('home', {
            url: '/',
            templateUrl: 'client/home/views/home.ng.html',
            controller: 'HomeController',
            data: {
              pageTitle: 'My Dynamic title'
            }
          })
    }
})();

Because you posted an Angular.js example in a Meteor.js-related question thread. — Alexander Chudesnov, Feb 22 '16 at 16:03

Meteor - Setting the document title

8 Answers8

Linked