Here is a JavaScript script to dynamically add meta tags (such as description and keywords) to the section of an HTML document. This can be useful for dynamically updating metadata for SEO purposes or for single-page applications (SPAs).
Code Example:
Dynamic Meta Tags Example
Welcome to the Meta Tags Example
Explanation:
setMetaTag Function:
Checks if a meta tag with the specified name already exists using document.querySelector.
If it exists, it updates the content attribute.
If it doesn't exist, it creates a new element, sets its attributes, and appends it to the section.
Dynamic Updates:
The script initially sets the description, keywords, and author meta tags.
After 5 seconds, it updates the description and keywords meta tags to demonstrate dynamic changes.
SEO Use Case:
This approach is useful for SPAs or pages where content changes dynamically, ensuring that search engines and social media platforms receive updated metadata.
Output:
Initially, the section will contain:
After 5 seconds, the description and keywords meta tags will be updated:
This script is lightweight and works in all modern browsers.