Manage meta tags for Search Engine Optimization (SEO)

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.

Install

Link to this version
ImportedReleased 21 August 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 3 (2.0.0-rc.3)
Browser Compatibility
Install with
bower install --save SherbyElements/sherby-metadata"#1.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.1

Dependencies

  • polymer#Polymer/polymer#^2.0.0