Package Exports

@sherby/sherby-metadata

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sherby/sherby-metadata) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<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

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.

<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',
};

Thanks

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

Publish

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

License

The MIT License (MIT)