Search code examples
keystonejs

How do I set the Title Tag and Meta Description for my Non-Post pages in Keystone JS?


I know how to set the title tag and meta description for my post and category pages because they come from a database, but I cannot find in KeystoneJS where to update these for the other pages - Home, Blog, etc.

Below is the handlebars code I am using for my meta data. Every page that is not a "Post" is using the final Else options at the bottom.

{{#if data.post}}
    {{#if data.post.meta.title}}
        <title>{{data.post.meta.title}}</title>
        <meta property="og:title" content="{{data.post.meta.title}}">
        <meta name="twitter:title" content="{{data.post.meta.title}}">
    {{else}}
        <title>{{data.post.title}}</title>
        <meta property="og:title" content="{{data.post.title}}">
        <meta name="twitter:title" content="{{data.post.title}}">
    {{/if}}
    {{#if data.post.meta.description}}
        <meta name="description" content="{{data.post.meta.description}}">
        <meta property="og:description" content="{{data.post.meta.description}}">
        <meta name="twitter:description" content="{{data.post.meta.description}}">
    {{else}}
        <meta name="description" content="{{data.post.content.brief}}">
        <meta property="og:description" content="{{data.post.content.brief}}">
        <meta name="twitter:description" content="{{data.post.content.brief}}">
    {{/if}}
        <meta property="og:type" content="article">
        <meta name="twitter:card" content="summary_large_image">
        <meta property="og:image" content="{{data.post.image.url}}">
        <meta name="twitter:image:src" content="{{data.post.image.url}}">
        <meta property="og:url" content="{{data.post.fullPostUrl}}">
        <meta name="twitter:url" content="{{data.post.fullPostUrl}}">
        <meta property="article:published_time" content="{{data.post.publishedDate}}">
    {{# each data.post.categories}}
        <meta property="article:tag" content="{{name}}">
    {{/each}} 
{{else}}
    <title>GENERAL TITLE</title>
    <meta propery="description" content="GENERAL DESCRIPTION">
    <meta property="og:image" content="{{baseUrl}}/images/logo.png">
    <meta name="twitter:image:src" content="{{baseUrl}}/images/logo.png">
{{/if}}

I can see by default keystone using the same value for all pages.

http://demo.keystonejs.com/

Thank you!


Solution

  • If anyone is curious, I was able to accomplish this by loading them directly from the routes. For example:

    // Render the view
    view.render('blog', { 
        title: 'Blog',
        description: 'This is my blog meta description'
        });