It will add and remove <meta> elements in the page <head> section based on the JSON object passed to it. This can update page titles while a use navigates a Single Page Application (SPA) or Progressive Web App (PWA) or set the values to be Server-Side Rendered (e.g. using puppeteer).

Any title key will be used to set the page title. description, image and url keys will set the og:... and twitter:... meta values and any other key will be used directly.

The name attribute is used for the <meta> tag unless the key is for an OpenGraph value in which case the property attribute will be set. i.e.

twitter:image metadata will set og:image metadata will set

Usage

Import updateMetadata and call as required:

import { updateMetadata } from 'app-metadata';

updateMetadata({
    title: 'This is the page title',
    description: 'This is the page description',
    keywords: 'these,are,keywords',
    image: 'https://www.example.com/myimage.jpg',
})

Alternatively, use addMetadataListener to register a listener and raise app-metadata CustomEvent with the metadata in the event detail:

import { addMetadataListener } from 'app-metadata';

addMetadataListener()

// elsewhere ...

this.dispatchEvent(new CustomEvent({
    bubbles: true,
    composed: true,
    detail: {
        title: 'This is the page title',
        description: 'This is the page description',
        keywords: 'these,are,keywords',
        image: 'https://www.example.com/myimage.jpg',
    },
}))

Demonstration

To demonstrate this approach does work for SEO I've created a very simple test site using the polymer-cli and added some content with the meta html headers set for each view using this <app-metadata> element.

Here's the meta data set for the main view:

this.fire('app-metadata', {
    title: 'Why use Agile Project Management?',
    description: 'How Agile Project Management Methodologies help compared to the old Waterfall approach to Project Management',
    keywords: 'scrum, scrum master, agile, training, certification, professional, certified, CSM, PSM'
});

This view has been successfully indexed by Google and appears correctly in the search results:

Example

Keywords

seo

metadata

FAQs

What is @captaincodeman/app-metadata?

Is @captaincodeman/app-metadata popular?

Is @captaincodeman/app-metadata well maintained?

Package last updated on 13 Jul 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install