Question

104

Change Meta Title and Description using Vue.js

rated 0 times [ 110] [ 6] / answers: 1 / hits: 19988 / 6 Years ago, tue, november 13, 2018, 12:00:00

Is it possible to change anything higher than the body tag in Vue.Js? The contents for both these elements is currently stored in the JSON file that is attached to an element further down the DOM tree.

I need to try and inject a meta title and description that can be crawled by Google (ie. It injects, then renders before it gets crawled) and understand the issues with accessing the body element and higher up the DOM tree, as the current Vue JSON is injected using the App ID on a DIV lower down.

I have previously used some jQuery code to address this issue on a Square Space template in some previous work

jQuery('meta[name=description]').attr('content', 'Enter Meta Description Here');

PAGE HTML

<!DOCTYPE html>

<html lang=en>



<head>

  <meta charset=utf-8>

  <meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>

  <meta name=description content={{items[0][0].meta-desc}}>

  <meta name=author content=>

  <title>{{items[0][0].meta-title}}</title>

  <!-- Bootstrap CSS -->

  <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css integrity=sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO crossorigin=anonymous>

  <!-- Vue.js CDN -->

  <script src=https://unpkg.com/vue></script>

</head>



<body>

  <!-- Page List -->

  <div class=container text-center mt-5 id=app>

      <h1 class=display-4>Vue Page Output:</h1>

      <h2>{{items[0][0].page1}}</h2>

  </div>

  <div class=container text-center mt-5>

    <h3>Other Pages</h3>

    <a href=products.html>Products</a>

    <a href=contactus.html>Contact Us</a>

</div>

  <!-- /.container -->



  <script type=text/javascript>

    const app = new Vue({

      el: '#app',

      data: {

        items: []

      },

      created: function () {

        fetch('test.json')

          .then(resp => resp.json())

          .then(items => {

            this.items = items

          })

      }

    });

  </script>

</body>



</html>

JSON

  [

    [

    {

        page1: Company Name,

        meta-title: Acme Corp

        meta-desc: Welcome to Acme Corp

    }

    ],

    [

    {

        products: Product List

    }

    ],

    [

    {

        contactus: Contact Us at Acme Corp

    }

  ]

Here is the code in action, the incoming JSON file comes in a fixed array format with the meta details alongside the body elements. Making this a bit more tricky.

https://arraydemo.netlify.com/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nicholas

Add To Favorites

Follow

Total Points: 188

Total Questions: 76

Total Answers: 103

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

answered 6 Years ago josh · Accepted Answer

Since what you want to change is outside the area controlled by Vue, you just use ordinary DOM manipulation. It would be something like

created() {

  fetch('test.json')

    .then(resp => resp.json())

    .then(items => {

      this.items = items;

      const descEl = document.querySelector('head meta[name=description]');

      const titleEl = document.querySelector('head title');



      descEl.setAttribute('content', items[0]['meta-desc']);

      titleEl.textContent = items[0]['meta-title'];

    })

}