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! :)

Answer 2

here is an improved way to do it:

{% block extraHead %}
 <meta name="description" content="{{ data.page.metaDescription | truncate(146, true, "..") | safe }}" />
{% endblock %}

What we did here:

• we truncate meta description to a specific length (in this instance 146 characters, but you can change that);
• we add a nice .. at the end that one is used to when googling around;
• we output everything as "safe" - this takes care of showing certain symbols or characters as unicode / html strings. Though it can be theoretically be abused.

See the screenshot to illustrate the last point: