Vue.js를 사용하여 메타 제목 및 설명 변경
Vue에서 바디 태그보다 높은 것을 변경할 수 있습니까?Js? 이 두 요소에 대한 내용은 현재 DOM 트리 아래 요소에 첨부된 JSON 파일에 저장되어 있습니다.
Google에서 탐색할 수 있는 메타 제목과 설명을 삽입해야 합니다.DIV 하단의 App ID를 사용하여 현재 Vue JSON이 주입되기 때문에 본문 요소 및 DOM 트리 상단의 액세스에 관한 문제를 파악한 후 크롤링합니다).
이전 작업에서 정사각형 공간 템플릿에서 이 문제를 해결하기 위해 jQuery 코드를 사용한 적이 있습니다.
jQuery('meta[name=description]').attr('content', 'Enter Meta Description Here');
페이지 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/
변경하는 것은 Vue가 제어하는 영역 밖에 있기 때문에 일반적인 DOM 조작을 사용합니다.뭐랄까...
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'];
})
}
Vue Router를 사용하는 경우 각 후크 전에 클리너 솔루션이 사용되고 있다고 생각합니다.
const routes = [{ path: '/list', component: List, meta: {title:'List'} }]
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})
그러나 정적 제목만 설정할 수 있습니다.
단, SEO 최적화를 원하는 경우 Nuxt가 대부분의 문제를 해결해 줄 것입니다.
Vue meta는 메타데이터 관리용 NPM 패키지입니다.https://vue-meta.nuxtjs.org/
vue 페이지 구성 요소에서 사용하는 방법의 예:
export default {
name: "Contact",
metaInfo: function() {
return {
title: "My page meta title",
meta: [
{ name: 'description', content: "My page meta description" }
]
}
}
Vue Router 를 사용하고 있는 경우는, 여기서 Vue meta 를 설정해, 모든 페이지가 사용할 수 있도록 할 수 있습니다.
import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'
Vue.use(Router)
Vue.use(VueMeta)
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
제목을 변경하려면 vuejs에서 쉽게 변경할 수 있습니다.
루트 작성 중 router.js 파일에서 다음과 같은 작업을 수행할 수 있습니다.
{
path:"/productdetail",
name:"productdetail",
component:ProductDetail,
meta: {
title : localStorage.getItem("title"),
}
}
router.beforeEach((toRoute,fromRoute,next) => {
window.document.title = toRoute.meta.title;
next();
})
localStorage를 사용하면 제목을 동적으로 변경할 수 있습니다.안타깝게도 메타 설명은 동일한 방법으로 변경되지 않습니다.
언급URL : https://stackoverflow.com/questions/53282040/change-meta-title-and-description-using-vue-js
'programing' 카테고리의 다른 글
| Django 템플릿에 VueJs 컴포넌트 살포 (0) | 2022.06.17 |
|---|---|
| 선택 옵션에서 값을 비활성화하는 방법(vue.js 2) (0) | 2022.06.17 |
| C 프로그래밍에서의 보이드 포인터의 개념 (0) | 2022.06.17 |
| 혼합 데이터 유형(int, float, char 등)을 어레이에 저장하는 방법은 무엇입니까? (0) | 2022.06.17 |
| Vuejs의 입력값에 소품을 전달하는 방법 (0) | 2022.06.17 |