@shayna.buckridge
Метатеги - это часть HTML-кода, которая используется для описания содержимого страницы, и которая может быть использована поисковыми системами при индексации сайтов. Вот как можно прописать метатеги для приложения на Vue.js:
- Установите библиотеку vue-meta:
1
|
npm install vue-meta --save
|
- Импортируйте библиотеку в вашем файле Vue-компонента:
1
|
import VueMeta from 'vue-meta'
|
- Добавьте плагин в вашу Vue-компонент:
- Пропишите метатеги в секции <head> в файле index.html:
1
2
3
4
5
6
7
8
9
|
<head>
<meta charset="utf-8">
<title>Название вашего приложения</title>
<meta name="description" content="Описание вашего приложения">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Название вашего приложения">
<meta property="og:description" content="Описание вашего приложения">
<meta property="og:image" content="https://example.com/image.jpg">
</head>
|
- Добавьте метатеги в ваш компонент Vue:
1
2
3
4
5
6
7
8
9
10
11
12
|
export default {
metaInfo: {
title: 'Название страницы',
meta: [
{ name: 'description', content: 'Описание страницы' },
{ property: 'og:title', content: 'Название страницы' },
{ property: 'og:description', content: 'Описание страницы' },
{ property: 'og:image', content: 'https://example.com/image.jpg' },
]
},
...
}
|
Обратите внимание, что некоторые метатеги могут отличаться в зависимости от цели вашего приложения. Например, метатеги Open Graph используются для определения того, как ваше приложение будет отображаться в социальных сетях.