Возможно ли изменить что-либо выше тега body в Vue.Js?Содержимое обоих этих элементов в настоящее время хранится в файле JSON, который прикреплен к элементу, расположенному ниже по дереву DOM.
Мне нужно попытаться добавить мета-заголовок и описание, которое может быть отсканировано Google (т.е.Он внедряет, затем выполняет рендеринг перед сканированием) и понимает проблемы с доступом к элементу body и выше по дереву DOM, поскольку текущий Vue JSON внедряется с использованием идентификатора приложения в DIV внизу.
Ранее я использовал некоторый код jQuery для решения этой проблемы в шаблоне Square Space в предыдущей работе
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"
}
]
Вот код в действии, входящий файл JSON поставляется в фиксированном формате массива с метаданными рядом с элементами тела.Сделать это немного сложнее.
https://arraydemo.netlify.com/