Manage meta tags for Search Engine Optimization (SEO)

Usage no npm install needed!

<script type="module">
  import sherbySherbyMetadata from 'https://cdn.skypack.dev/@sherby/sherby-metadata';



npm GitHub webcomponents.org MIT License Number of downloads BundlePhobia Travis CI Codecov Codacy

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: -->

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
  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.

Development on WSL

# 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)