In this article, we are going to see the best way to implement a tag/keyword system for our website. First of all, we should know why we need this system and where it is good to implement it.

If you have a blogging website or a portfolio that contains features of blogging or writing articles, then you must include this tag system in your blogs.

Generally, while writing blogs on the internet, we include fields like title, about, date, thumbnail, and article data. One extra field you should add to your page is the tags system, where you will be able to add various related tags about your blog posts.

How it works ?

When Google reads your page, it also reads the tags/keywords you have provided for metadata. So it is best for SEO. Search engines will easily know which type of content is available on this site, and it will be recommended whenever people try to search for something with related keywords. Having good tags on your webpage will help attract more people through searches.

Program

We will consider here the state in React.js to store or hold the tags.

 const[tags, setTags]=useState([]);

HTML + CSS

You can make your own design as you want or just simply paste following code to get started.

 <div className='keyword-holder'>
     {tags.map(val => (
           <span key={Math.random() * 99} className='keyword'>{val}</span>
            ))}
     <input type='text' placeholder='Add tag' onKeyDown={addKeyword} id='keyword' />
</div>

Logic

Here we will consider traditions tags system where 

1. If you click “Enter” the tags will added.

2. If you click “backspace” and if input is empty then previous keyword will be removed which I feel best way for implementation.

Main function

 const addKeyword = (e) => {
        let word = document.querySelector('#keyword').value;
        if (e.code == 'Enter') {
            if (tags.includes(word)) {
                alert('Keyword already exist.')
            } else {
                setTags([...tags, word.replaceAll(/\s/g, '')])
                document.querySelector('#keyword').value = '';
            }
        }
        if (e.code == 'Backspace') {
            if (word === '') {
                const newTags = tags.filter((item, i) => {
                    return i != tags.length - 1
                })
                setTags(newTags)
            }
        }
    }

Style your component as per your choice. In such a way we can implement Tags or keywords system in our Node.js applications.