How do I set Ghost Blog Custom Routes.yaml Collection Title / Meta Description in my custom template?

Question

Using the Ghost blog routes.yaml file it is possible to use the collections block to create a custom collection made from some tag(s) and / or other data. You can also tell this collection to use a custom theme template see:

1. https://docs.ghost.org/tutorials/creating-content-collections/
2. https://docs.ghost.org/concepts/routing/#content-structure

For instance:

collections:
  /example/:
    permalink: /example/{slug}/
    controller: channel
    filter: tag:example-tag
    template:
      - example

All of the above works and my collection properly uses my new example theme file.

The issue is that unlike the tag page (for example-tag) my new custom collection does not have a readily documented way to work with the title etc.

It does not pull the title / meta description from the tag used to build the collection (which would be great for collections built from single tags). In an attempt to work around that I tried some {{#has}} statements but I can't figure out what context the custom route would fit into.

With the above example routes.yaml the title for the custom collection ends up as 'My Site Name (Page 1)' — and there is no Meta Description.

This issue also extends into the Open Graph data which lists an identical title as well as no description for the custom collection.

My guess is that it may be possible to use a data property attached to the routes.yaml file to achieve this (see: https://docs.ghost.org/concepts/routing/#data) but I haven't found a solution as of now.

While my initial attempts at googling for a solution came up empty, this is the best reference I have seen to the issue:

1. https://forum.ghost.org/t/dynamic-routing-page-post-data-context-in-default-hbs-nested-navigation-on-custom-collections/4204
2. https://github.com/TryGhost/Ghost/issues/10082

Arleen

Answer 1

I found a way to work around.

1. You create a page called example in the Ghost Admin tool.
2. Customize routes (instead of collections) in the routes.yaml as following:

routes:
  /example/:
    controller: channel
    filter: tag:example-tag
    template: example
    data: page.example

The page.example will use the metadata of this page in the Ghost.

Heymann

I need to try this first but if this works... Amazing! – Arleen

Answer 2

This is possible only with workaround described in issue: https://github.com/TryGhost/Ghost/issues/10082

Generally do following:

1. create page Example (with slug example) and fill metadata title & description you want
2. in routes.yaml alter your collection definition /example/ add following:data: page.example to link your collection root with specified page
3. now in your template definition example.hbs you could use e.g. {{#page}} {{content}} {{/page}} tag to insert content from your page. You can do it also in default.hbs template which is included from your example.hbs. So replace: <title>{{meta_title}}</title> in default.hbs with following:

{{#unless page}}
  <title>{{meta_title}}</title>
{{else}}
  {{#page}}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}"/>
  {{/page}}
{{/unless}}

This will set specific title/description for your collection root pages in general way. It is possible to generate schema.org metadata in the similar way. Unfortunately Facebook and Twitter metadata is not so simple to do because, {{ghost_head}} tag in default.hbs already inserts site metadata to this page. Last note: besides {{meta_title}} and {{meta_description}} I suppose you could use all metadata fields defined here.

Mesognathous

Answer 3

In default.hbs I added the following block:

{{{ block "metaTitle"}}}

and eg. in post.hbs I filled that block as follows:

{{!< default}}

<div class="content-area">
<main class="site-main">
    {{#post}}
        {{#contentFor "metaTitle"}}
            <title>{{title}}</title>
        {{/contentFor}}
        ...

For other pages like page.hbs, blog.hbs, author.hbs I did the same. I think that solution is more flexible because we have more control over title value.

Oz