Hone logo
Hone
Problems

Dynamic Meta Tags in Vue.js

This challenge focuses on dynamically updating meta tags within a Vue.js application. Properly managing meta tags is crucial for Search Engine Optimization (SEO) and social media sharing, as it allows you to control how your page content is represented and indexed. You will create a reusable Vue component that allows developers to easily define and update meta tags based on component data.

Problem Description

Your task is to create a Vue.js component, written in TypeScript, that allows for the dynamic generation and updating of HTML meta tags within the <head> section of your application. This component should be flexible enough to handle various meta tag attributes and their corresponding values.

Key Requirements:

  1. Component Creation: Develop a Vue.js component (e.g., MetaTags.vue) that can be imported and used in other Vue components.
  2. Dynamic Meta Tag Generation: The component should accept an array of meta tag objects as a prop. Each object in the array will represent a single meta tag and should contain properties like name, content, property (for Open Graph tags), charset, httpEquiv, etc.
  3. DOM Manipulation: The component must programmatically add, update, or remove meta tags in the <head> of the HTML document based on the provided props.
  4. Reactivity: The meta tags should update reactively if the data bound to the component's props changes.
  5. Uniqueness: Ensure that for a given attribute (e.g., name, property), only one meta tag with that attribute and value exists in the <head>. If a new tag is added with an existing name or property, the existing one should be updated.
  6. Cleanup: When the component is unmounted, all meta tags added by it should be removed from the <head>.
  7. TypeScript: The solution must be implemented using TypeScript.

Expected Behavior:

When the MetaTags component is mounted with a specific set of meta tag configurations, corresponding <meta> elements should be rendered in the document's <head>. If the props are updated, the meta tags in the <head> should reflect these changes. Upon unmounting, the injected meta tags should be removed.

Edge Cases:

  • Handling different types of meta tags (e.g., name, property, charset, http-equiv).
  • Ensuring duplicate meta tags are not created; existing ones should be updated.
  • What happens if an empty array of meta tags is provided?
  • What happens if a meta tag definition is missing a crucial attribute like name or property for identification?

Examples

Example 1: Setting basic meta tags

// In a parent Vue component's template:
<template>
  <div>
    <MetaTags :meta="pageMeta" />
    <h1>My Awesome Page</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MetaTags from './MetaTags.vue';

export default defineComponent({
  components: {
    MetaTags,
  },
  data() {
    return {
      pageMeta: [
        { name: 'description', content: 'This is a description of my page.' },
        { name: 'keywords', content: 'Vue, meta tags, SEO' },
        { charset: 'UTF-8' },
      ],
    };
  },
});
</script>

Output in <head>:

<meta charset="UTF-8">
<meta name="description" content="This is a description of my page.">
<meta name="keywords" content="Vue, meta tags, SEO">

Explanation: The MetaTags component receives an array of meta tag configurations and adds corresponding <meta> elements to the document's <head>.

Example 2: Dynamic update and Open Graph tags

// In a parent Vue component's template:
<template>
  <div>
    <MetaTags :meta="currentPageMeta" />
    <button @click="updateMeta">Update Meta</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MetaTags from './MetaTags.vue';

export default defineComponent({
  components: {
    MetaTags,
  },
  data() {
    return {
      currentPageMeta: [
        { name: 'description', content: 'Initial description.' },
        { property: 'og:title', content: 'Initial Page Title' },
        { property: 'og:image', content: 'initial_image.jpg' },
      ],
    };
  },
  methods: {
    updateMeta() {
      this.currentPageMeta = [
        { name: 'description', content: 'Updated and improved description!' },
        { property: 'og:title', content: 'Updated Page Title' },
        { property: 'og:type', content: 'website' }, // New OG tag
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }, // New standard meta tag
      ];
    },
  },
});
</script>

Initial Output in <head>:

<meta name="description" content="Initial description.">
<meta property="og:title" content="Initial Page Title">
<meta property="og:image" content="initial_image.jpg">

After clicking "Update Meta" Output in <head>:

<meta name="description" content="Updated and improved description!">
<meta property="og:title" content="Updated Page Title">
<meta property="og:image" content="initial_image.jpg"> <!-- This one remains unchanged as it wasn't in the updated prop -->
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explanation: When the button is clicked, currentPageMeta is updated. The MetaTags component detects this change and updates the existing description and og:title tags, adds the new og:type and viewport tags, and keeps the og:image tag (since it was not modified in the new prop array and was previously added).

Example 3: Handling duplicate meta tag definitions (should update)

// In a parent Vue component's template:
<template>
  <div>
    <MetaTags :meta="duplicateMeta" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MetaTags from './MetaTags.vue';

export default defineComponent({
  components: {
    MetaTags,
  },
  data() {
    return {
      duplicateMeta: [
        { name: 'author', content: 'John Doe' },
        { name: 'author', content: 'Jane Smith' }, // This should override the previous 'author' tag
        { property: 'og:description', content: 'First description' },
        { property: 'og:description', content: 'Second description' }, // This should override the previous 'og:description'
      ],
    };
  },
});
</script>

Output in <head>:

<meta name="author" content="Jane Smith">
<meta property="og:description" content="Second description">

Explanation: Even though author and og:description are defined twice in the prop, the component should only render one of each, using the last definition provided in the array.

Constraints

  • The MetaTags component must be implemented using Vue 3 and TypeScript.
  • The meta prop should be an array of objects, where each object can have any valid HTML meta tag attribute as a key (e.g., name, content, property, charset, httpEquiv).
  • The component should not rely on any external libraries for DOM manipulation beyond standard browser APIs.
  • Performance is a consideration; excessive DOM manipulations should be avoided. The component should be efficient in updating tags.
  • The solution should handle both string and non-string values for meta tag attributes appropriately (though typically they are strings).

Notes

  • Consider how you will identify existing meta tags to update or remove them. A common strategy is to use a combination of attributes like name and content, or property and content.
  • The document.head is the target for these manipulations.
  • Vue's lifecycle hooks (mounted, updated, unmounted) will be essential for managing the meta tags.
  • Think about how to handle the content attribute for tags like charset or http-equiv.
Loading editor...
typescript