About the sherby-metadata category

sherby-metadata: Published on webcomponents.org
Build status

<sherby-metadata>

sherby-metadata is a Polymer 3 element used to manage meta tags data for
Search Engine Optimization (SEO). It will add, update and remove <meta>
elements to the <head> section based on the JSON object passed to it.

Installation

As Polymer 3 use npm, you must use it to install this component:

npm install @sherby/sherby-metadata

For the Polymer 2 version, use the SherbyElements/sherby-metadata#^v1.0.0 inside your bower.json file.

bower install SherbyElements/sherby-metadata --save

Use

To use this element, add the import to your shell component and include it
in your component code.

<sherby-metadata data="[[data]]"></sherby-metadata>

To update your meta tags data, you can update his data property in your shell
component:

this.data = {
  description: 'This is the page description',
  keywords: 'these,are,keywords',
  title: 'This is the page title',
};

Alternatively, after the sherby-metadata is include in your shell component,
you can dispatch a sherby-metadata event:

this.dispatchEvent(new CustomEvent('sherby-metadata', {
  detail: {
    description: 'This is the page description',
    keywords: 'these,are,keywords',
    title: 'This is the page title',
  },
}));

This component support also the OpenGraph tags.

Thanks

Special thanks to CaptainCodeman for his app-metadata component that inspired me for this component.