sherby-metadata

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:

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

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 to find one to manage meta tags inside my application. 🔍

The only component that I found was the app-metadata element, from Captain Codeman. It had everything that I was looking for, but was built with the deprecated Polymer 1 library…

So, I decided to take inspiration from its work and to create a Polymer 2 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. ⏳

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 to NPM.js, and the late WebComponents.org 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. 😊

npm install @sherby/sherby-metadata

History and future work

As my personal website has evolved, I refactored it to support Polymer 3 (2.0.0-rc.2 – May 11, 2018) and finally, LitElement (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 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! 😉 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? 😉