sherby-metadata | Vaadin

Manage meta tags for Search Engine Optimization (SEO)

Published on Build status


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.


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


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: = {
  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.


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


Link to this version
ImportedReleased 12 May 2018MIT License
Framework Support
Polymer 3.0+
Also supported:
Polymer 2 (1.0.1)
Browser Independent
Install with
npm install @sherby/sherby-metadata"@2.0.0-rc.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0-rc.3


  • @polymer/polymer#^3.0.0-pre.1