sherby-metadata
Manage meta tags for Search Engine Optimization (SEO)
<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.
Links
Compatibility
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