@sherby/sherby-metadata
Version:
Manage meta tags for Search Engine Optimization (SEO)
97 lines (72 loc) • 3.42 kB
Markdown
# \<sherby-metadata\>
[](https://www.npmjs.com/package/@sherby/sherby-metadata)
[](https://github.com/SherbyElements/sherby-metadata/releases)
[](https://www.webcomponents.org/element/SherbyElements/sherby-metadata)
[](https://github.com/SherbyElements/sherby-metadata/blob/master/LICENSE.md)
[](https://npm-stat.com/charts.html?package=%40sherby%2Fsherby-metadata)
[](https://bundlephobia.com/result?p=@sherby/sherby-metadata)
[](https://travis-ci.org/SherbyElements/sherby-metadata)
[](https://codecov.io/gh/SherbyElements/sherby-metadata)
[](https://app.codacy.com/gh/SherbyElements/sherby-metadata)
`sherby-metadata` is a **LitElement** 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
```bash
npm install @sherby/sherby-metadata
```
## Use
To use this element, import it in your shell component and add a `sherby-metadata` element
in your component template.
```html
<sherby-metadata .data="${data}"></sherby-metadata>
<!-- Or alternatively if you want to dispatch events: -->
<sherby-metadata></sherby-metadata>
```
To update the meta tags on your page, you can update the data property in your shell
component or you can dispatch a `sherby-metadata` event:
```javascript
// By updating the data property
this.data = {
description: 'This is the page description',
keywords: 'these,are,keywords',
title: 'This is the page title',
};
// By dispatching a custom 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](http://ogp.me/) tags:
```javascript
this.data = {
'og:description': 'This is the page description',
'og:keywords': 'these,are,keywords',
'og:title': 'This is the page title',
};
```
## Thanks
Special thanks to [CaptainCodeman](https://github.com/CaptainCodeman) for his [app-metadata](https://github.com/CaptainCodeman/app-metadata) component that inspired me for this component.
## Development on WSL
```bash
# To use Chrome on Windows
export CHROME_BIN=/mnt/c/Program\ Files\ \(x86\)/Google/Chrome/Application/chrome.exe
```
## Publish
Increment the `version` defined in the `package.json` file and run the command below to publish the module in the
registry:
```bash
# Dry run
npm publish --dry-run
# For real (are you really sure?)
npm publish
```
## License
The [MIT License][1] (MIT)
[1]: https://opensource.org/licenses/MIT