meta data?
open graph? (og)
Nuxt.js 에서 메타데이터를 설정하는 방법
1. Nuxt.js에서 nuxt.config 에서 default값으로 header 값을 설정 가능하다.
2. 각 페이지에서 head 에 대한 메타 데이터를 리턴하는 방법으로도 설정 가능하다.
3. 메인페이지 기본설정과 달리, 추가적으로 노출하고 싶은 데이터를 동적으로 표현하는 방법은 hid를 고유식별자로 사용하면, 하위구성요소에서 사용될때, 메타태그가 중복되는 것을 방지할 수 있다.(https://nuxtjs.org/docs/2.x/components-glossary/pages-head)
//nuxt.config.js
module.exports = {
head:{
meta:[
{property:'og:url', content:'https://www.example.com'},
{property:'og:description', content:'decripton 내용'},
{property:'og:type', content:'webpage'},
{property:'og:image', content:'imageURL'},
]
}
}
//default
export default {
head(){
meta:[
{property:'og:url', content:'https://www.example.com'},
{property:'og:description', content:'decripton 내용'},
{property:'og:type', content:'webpage'},
{property:'og:image', content:'imageURL'},
]
}
}
//하위 컴포넌트에서 변경된 메타데이터를 적용시키고자 할때
export default {
head(){
meta:[
{hid:'og:url', name:'og:url' content:'https://www.example.com'},
{hid:'og:description', hid:'og:description', name:'og:url' content:'decripton 내용'},
{hid:'og:type', name:'og:type' content:'webpage'},
{hid:'og:image', name:'og:image' content:'imageURL'},
]
}
}
Reference