search

troxler / vue-headful

Set document title and meta tags with Vue.js
MIT License
229 stars 17 forks source link

how set meta description and keywords #4

Closed borodadada closed 6 years ago

borodadada commented 6 years ago

i use instruction

import vueHeadful from 'vue-headful'

Vue.component('headful', vueHeadful)

in html

<headful description="Description from vue-headful" ></headful>

if set title - work!

how set meta description and keywords???

my index html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href='/css/style.css'>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <headful description="Description from vue-headful" ></headful>
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

this example need result <meta name="description" content="abcdefg">

troxler commented 6 years ago

Hello borodadada. Thanks for using vue-headful.

To solve your problem, please have a look at the documentation:

Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values. So it is important that you add everything that you want to have populated in your HTML first. For example, to specify the title and description you have to prepare the HTML as follows.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta itemprop="name">
    <meta property="og:title">
    <meta name="twitter:title">
    <meta name="description"/>
    <meta itemprop="description">
    <meta property="og:description">
    <meta name="twitter:description">
</head>
<body>
<!-- ... -->
</body>
</html>

So you need to add <meta name="description"> to your index.html