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.
npm install @sherby/sherby-metadata
To use this element, import it in your shell component and add a sherby-metadata
element
in your component template.
<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:
// 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 tags:
this.data = {
'og:description': 'This is the page description',
'og:keywords': 'these,are,keywords',
'og:title': 'This is the page title',
};
Special thanks to CaptainCodeman for his app-metadata component that inspired me for this component.
# To use Chrome on Windows
export CHROME_BIN=/mnt/c/Program\ Files\ \(x86\)/Google/Chrome/Application/chrome.exe
Increment the version
defined in the package.json
file and run the command below to publish the module in the
registry:
# Dry run
npm publish --dry-run
# For real (are you really sure?)
npm publish
The MIT License (MIT)