apostrophe cms - customize page settings

Question

I want to add meta-key and meta-description fields to the page setting dialog, and then render them to the page. I was able to find that one can do something like this in the page template (html) file:

{% extends data.outerLayout %}
{% block extraHead %}
    <meta name="description" content="this is the page description" />
{% endblock %}

But how do I allow the end user to insert these values?

Answer 1

Ok, so after looking in the apostrophe-sandbox demo site I was able to discover the answer. I added under the lib/modules folder in my project a new folder called apostrophe-custom-pages, and inside that I added an index.js file that looks like this:

module.exports = {
  beforeConstruct: function(self, options) {
    options.addFields = [
      {
        name: 'metaDescription',
        label: 'Meta Description',
        type: 'string'
      },
      {
        name: 'metaTags',
        label: 'Meta Tags',
        type: 'string'
      }
    ]
  }
};

Then, inside my page html template I added:

{% block extraHead %}
  <meta name="description" content="{{ data.page.metaDescription}}" />
  <meta name="tags" content="{{ data.page.metaTags}}" />
{% endblock %}

That's it. It works. Now I can provide SEO support. Hurray! :)