Contact us
Get started

Directory

← Back

sherby-metadata

Manage meta tags for Search Engine Optimization (SEO)

Author

Contributors

Rating

Links

Published on webcomponents.org Build status

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

Compatibility

(Loading compatibility data...)

Last updated: 2017-08-21

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

sherby-metadata - Vaadin Add-on Directory

Manage meta tags for Search Engine Optimization (SEO) sherby-metadata - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/SherbyElements/sherby-metadata) [![Build status](https://travis-ci.org/SherbyElements/sherby-metadata.svg?branch=master)](https://travis-ci.org/SherbyElements/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 `` elements to the `` section based on the JSON object passed to it. ## Installation As Polymer 3 use npm, you must use it to install this component: ```bash npm install @sherby/sherby-metadata ``` For the **Polymer 2** version, use the `SherbyElements/sherby-metadata#^v1.0.0` inside your bower.json file. ```bash 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. ```html ``` To update your meta tags data, you can update his data property in your shell component: ```javascript 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: ```javascript 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](https://github.com/CaptainCodeman) for his [app-metadata](https://github.com/CaptainCodeman/app-metadata) component that inspired me for this component.
Online