A web component that lets you programmatically update the most common SEO tags of your website:
<title>My page title</title><meta>tags (e.g<meta name="description" content="any content here"/>,<meta property="og:description" content="any content here"/>,<meta property="twitter:title" content="title here"/>...)<link>tags (e.g<link rel="canonical" href="http://my-canonical-url" />...)
npm i dlc-seo-tags --saveImport the component in src/index.ts:
// ...
import 'dlc-seo-tags';Usage. Example in a component acting as a page:
import { Component, h } from '@stencil/core';
import { SeoTagsData } from 'dlc-seo-tags';
const seoData: SeoTagsData = {
title: 'About page',
meta: [
{ name: 'description', 'Description of this page' },
{ property: 'og:description', content: 'Description of this page' },
{ property: 'og:image', content: '/any/image/path.jpg' },
{ property: 'og:url', content: `${window.location.origin}${window.location.pathname}` },
{ name: 'twitter:title', 'About page' },
{ name: 'twitter:description', 'Description of this page' },
{ name: 'twitter:card', content: 'summary' },
{ name: 'twitter:site', content: '@_dlopezcast' },
{ name: 'twitter:creator', content: '@_dlopezcast' },
],
links: [
{ rel: 'canonical', href: `${window.location.origin}${window.location.pathname}` }
]
};
@Component({
tag: 'about-page',
styleUrl: 'about-page.scss'
})
export class AboutPage {
render() {
return (
<div class="about-page">
<dlc-seo-tags data={seoData}></dlc-seo-tags>
<header>
<h1>Hey, my name is David!</h1>
</header>
<main>
<p>Description of myself ;)</p>
</main>
</div>
);
}
}Include the web component in your html file with the following script tag:
<script type="text/javascript" src="https://unpkg.com/dlc-seo-tags@latest/dist/dlc-seo-tags/dlc-seo-tags.js"></script>Example:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
</head>
<body>
<dlc-seo-tags></dlc-seo-tags>
<script type="text/javascript" src="https://unpkg.com/dlc-seo-tags@latest/dist/dlc-seo-tags/dlc-seo-tags.js"></script>
<script>
const seoData = {
title: 'Page title',
meta: [
{
name: 'description',
content: 'Page description'
},
{
property: 'og:description',
content: 'Page og:description ;)'
},
{
property: 'twitter:site',
content: '@_dlopezcast'
}
],
links: [
{
rel: 'canonical',
href: window.location.origin + window.location.pathname
}
]
};
window.onload = () => {
const dlcSeoTagsEl = document.querySelector('dlc-seo-tags');
dlcSeoTagsEl.data = seoData;
};
</script>
</body>
</html>git config alias.tag-release '!git tag release_$(cat package.json | grep name | head -1 | cut -d: -f2 | sed -E "s/([[:space:]]|,|\")//g")@$(cat package.json | grep version | head -1 | cut -d: -f2 | sed -E "s/([[:space:]]|,|\")//g")'# ... commit
git tag-release
git push origin master --tags