sherby-metadata
Tags: webcomponents, showdev, webdev, javascript
Published: 2020-09-18 20:12:18

---
title: sherby-metadata
published: true
date: 2020-09-11 00:45:00 UTC
tags: webcomponents, showdev, webdev, javascript
canonical_url: https://www.benjaminrancourt.ca/sherby-metadata
cover_image: https://www.benjaminrancourt.ca/2020-09-06-partial-screenshot-sherby-metadata.jpeg
---

## Context
When I was coding the first versions of my bilingual website, I wanted the French and English versions, the only two pages I had, to appear correctly on **search engines** (SEO – _Search Engine Optimization_). I wanted to be able to search my name on Google and find my website (I know, I am a self-centered person 😂).

To do that, I needed to update the **meta data** of the pages, which are data to help find the pages easily on the Web. They are primarily used by search engines to index correctly the pages on search results and by social media to add a preview of a link. 🧐

In HTML, meta data, also known as **meta tags**, are defined with a similar code as below for each page:

```html
<meta name="description" content="One of these experiments was to start a personal blog, a place where I could freely write and mostly, deepen some things that I want to know or to remember better.">
<meta name="twitter:title" content="Introduction - Benjamin Rancourt">
<meta property="og:locale" content="en_CA">
```
<figcaption>Example of meta tags from my previous post, <a href="https://www.benjaminrancourt.ca/introduction"><em>Introduction</em></a></figcaption>

But, in the context of a **Progressive Web App** (PWA), I could not do that, as I had only a single HTML page… So, I needed to find a way to update these tags dynamically inside my JavaScript application.

## Creation
As my website was built with **Web Components**, I started looking into the [WebComponents.org database](https://www.webcomponents.org/) to find one to manage meta tags inside my application. 🔍

The only component that I found was the **[app-metadata](https://www.webcomponents.org/element/CaptainCodeman/app-metadata)** element, from [Captain Codeman](https://www.captaincodeman.com/about). It had everything that I was looking for, but was built with the deprecated [Polymer 1](https://polymer-library.polymer-project.org/1.0/docs/about_10) library…

So, I decided to take **inspiration** from its work and to create a [Polymer 2](https://polymer-library.polymer-project.org/2.0/docs/about_20) component on my website. After some days (or maybe weeks), I could finally see on Google that everything was working as expected, as it takes some time for changes to propagate to the search engines. ⏳

![](https://www.benjaminrancourt.ca/temp/2020-09-07-screenshot-google-search-fr-1.jpeg)

![](https://www.benjaminrancourt.ca/temp/2020-09-07-screenshot-google-search-en-2.jpeg)

<figcaption>Screenshots of Google search results, on September 7, 2020</figcaption>

## Publication
After a while, I decided that this component could be reusable to others and myself, so I finally published the first version (1.0.1 – _August 20, 2017_) on the Web under a new name: **sherby-metadata**. I could have made a _Pull Request_ to its repository, but I did a lot of **refactoring** and added many comments to help me – and other people looking at the implementation – comprehend the source code. 📖

I also wanted to experience the **full publication** of a Web Component, from [GitHub](https://github.com/SherbyElements/sherby-metadata) to [NPM.js](https://www.npmjs.com/package/@sherby/sherby-metadata), and the late [WebComponents.org](https://www.webcomponents.org/element/@sherby/sherby-metadata) database. And with that, I have also experimented the writing of **documentation** and **unit tests**. 📗

As the work of Captain Codeman helped me a lot, I added a credit into the **README.md** file to mention its component.

As the sherby-metadata component had been published in the NPM registry, I (_almost_) **needed only** to execute the command below to use it in my new website. It is really great to have this component published. 😊

```sh
npm install @sherby/sherby-metadata
```

## History and future work
As my personal website has evolved, I refactored it to **support** [Polymer 3](https://polymer-library.polymer-project.org/3.0/docs/about_30) (2.0.0-rc.2 – _May 11, 2018_) and finally, [LitElement](https://lit-element.polymer-project.org/) (3.0.0 – _July 7, 2019_).

With the new use case of the component inside my blog, I encountered some **corner cases** that I will address someday, like support of [multiple values](https://ogp.me/#array) for a tag (use case: _article:tag_ and _article:author_), and the creation of a mixin, as there is nothing to render.

And while I am at it, I am sure there will be some **maintenance** work, like updating Node version and improving the documentation. 🤖

So, there will probably be a **3.1.0 version** soon. Watch the repository to be notified when the **next release** comes out. Or simply run [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)! 😉 And if you use it, do not hesitate to star the project on GitHub! 🌟

By chance, did you find this article by looking on a search engine? 😉