Add useful meta fields to all pages and pieces.
Feature | Status |
---|---|
SEO Meta fields for pages and pieces | ✅ Implemented |
SEO Page Scanner | 🚧 Under development |
npm install @apostrophecms/seo
Configure @apostrophecms/seo
in app.js
.
require('apostrophe')({
shortName: 'MYPROJECT',
modules: {
'@apostrophecms/seo': {}
}
});
It is important to set the baseUrl
option on your ApostropheCMS application for various reasons. In the SEO module it contributes to building the correct canonical
link tag URL. The baseUrl
can be set two ways:
require('apostrophe')({
shortName: 'mysite',
baseUrl: 'https://mysite.com',
modules: {
// ...
}
});
module.exports = {
baseUrl: 'https://mysite.com',
modules: {
// other module env configuration
}
};
If you choose to disable SEO fields for a piece type or page type you can do so by setting seoFields: false
on the appropriate module. The following modules disable SEO field enhancements by default:
@apostrophecms/global
@apostrophecms/user
@apostrophecms/image
@apostrophecms/image-tag
@apostrophecms/file
@apostrophecms/file-tag
module.exports = {
options: {
label: 'Person',
pluralLabel: 'People',
seoFields: false
}
};
Setting seoGoogleAnalytics: true
in @apostrophecms/global
will add a Google Analytics tracking ID field to your Global configuration:
require('apostrophe')({
shortName: 'MYPROJECT',
modules: {
'@apostrophecms/seo': {},
'@apostrophecms/global': {
options: {
seoGoogleAnalytics: true
}
}
}
});
Setting seoGoogleTagManager: true
in @apostrophecms/global
will add a Google Tag Manager ID field to your Global configuration:
require('apostrophe')({
shortName: 'MYPROJECT',
modules: {
'@apostrophecms/seo': {},
'@apostrophecms/global': {
options: {
seoGoogleTagManager: true
}
}
}
});
Setting seoGoogleVerification: true
in @apostrophecms/global
will add a Google Site Verification ID field to your Global configuration:
require('apostrophe')({
shortName: 'MYPROJECT',
modules: {
'@apostrophecms/seo': {},
'@apostrophecms/global': {
options: {
seoGoogleVerification: true
}
}
}
});
The canonical link field on a page or piece allows an editor to select another page that search engines should understand to be the primary version of that page or piece. As described on Moz.com:
A canonical tag (aka "rel canonical") is a way of telling search engines that a specific URL represents the primary copy of a page. Using the canonical tag prevents problems caused by identical or "duplicate" content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines which version of a URL you want to appear in search results.
Optionally add the following include to your notFound.html
view. If the app has a Google Tracking ID value entered, this will send an event to Google Analytics tracking the 404 response, the URL on which it happened, and, if applicable, the page on which the bad URL was triggered (helping you identify where bad links are located).
{% block extraBody %}
{{ super() }}
{% include "@apostrophecms/seo:404.html" %}
{% endblock %}
If you already have an extraBody
block in the notFound.html
view file, you'll only need to add the {% include "@apostrophecms/seo:404.html" %}
statement somewhere in that.
{% block extraBody %}
{# ...Other templating... #}
{% include "@apostrophecms/seo:404.html" %}
{% endblock %}
The following are the fields that can be added to pieces, pages, and the global doc, as well as what module option enables them.
Name | Description | Module Effected | Module Option |
---|---|---|---|
seoTitle |
Title attribute, populates <meta name="title" /> tag |
@apostrophecms/doc-type |
Enabled by default |
seoDescription |
Description attribute, populates <meta name="description" /> tag |
@apostrophecms/doc-type |
Enabled by default |
seoRobots |
Robots attribute, populates <meta name="robots" /> tag |
@apostrophecms/doc-type |
Enabled by default |
_seoCanonical |
Canonical URL, populates <link rel="canonical" /> tag |
@apostrophecms/page-type |
Enabled by default |
seoGoogleTagManager |
Google Tag Manager Container ID | @apostrophecms/global |
seoGoogleTagManager: true |
seoGoogleTrackingId |
Google Analytics ID | @apostrophecms/global |
seoGoogleAnalytics: true |
seoGoogleVerificationId |
Google Verification ID, populates <meta name="google-site-verification" /> |
@apostrophecms/global |
seoGoogleVerification: true |