<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.