Search code examples
vue.jsvue-meta

Why description of my vue.js project URL is shown "noscript" in some application

I have a vue.js project, when I put it's URL in some App, I think it should be show the title and description below message box.

but it was show content of noscript tags, why?

I think I set title and description in my vue.js page correct, I used vue-meta package.

enter image description here

This is what shown in LINE, I want the title show in first line, and description show in second line.

enter image description here

And this is what shown in Instegram. Also, I think the first should be show the page title, but it's not.

enter image description here

Solution

  • As @deceze already pointed out in the comments, services that try fetching a title and description for a website only fetch the initial HTML and don't execute JavaScript during the process. The vue-meta package, however, sets the title and meta tags only when executing JavaScript.

    Assuming you are using vue-cli, there should be a file public/index.html, that is served as the initial HTML when requesting your application. In that file, you can easily adjust the <title> tag and add some <meta> tags to the <head> of the page.

    You can also have a look at the Vue CLI documentation about the index.html file: https://cli.vuejs.org/guide/html-and-static-assets.html#the-index-file.