Directory

← Back

sherby-metadata

Manage meta tags for Search Engine Optimization (SEO)

Author

Contributors

Rating

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/polymer#^3.0.0-pre.1
Released
2018-05-12
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Polymer 2.0+ in 1.0.1
Browser
Browser Independent
Online