예를들면,

제목 : 개발자포럼

본문 : 개발자포럼 만쉐이

이런식의 게시글이 있고 게시글을 클릭해서 상세페이지에 접근했다고 가정하겠습니다.

우선 헤더 메타태그에는 이런식으로 작성을해두고

<meta name="title" id="meta_title" content="">

<meta name="description" id="meta_description" content="">

<meta name="keywords" id="meta_keywords" content="">

<meta property="og:site_name" content="" />

<meta property="og:type" content="website" />

<meta property="og:url" id="meta_og_url" content="" />

<meta property="og:title" id="meta_og_title" content="" />

<meta property="og:description" id="meta_og_description" content="" />

<meta property="og:image" id="meta_og_image" content="" />

<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="627" />

해당페이지에서 axios로 통신을한후

axios({

method: 'get',

url: this.url,

params : this.boardDetailParam

})

.then(function (response) {

this.resultDatas = response.data;

setTimeout(() => {

commonVue.setMeta(this.resultDatas.data.title);

}, 100);

}.bind(this))

.catch(function(e) {

});

통신이후 비동기처리하기위해 setTimeout이후

commonVue.setMeta(this.resultDatas.data.title);

이런식으로 공통객체에 해당 게시글의 제목을 넘깁니다.

commonVue

setMeta : function (title) {

document.title = title;

document.getElementById('meta_title').setAttribute('content', title);

document.getElementById('meta_description').setAttribute('content', title);

document.getElementById('meta_og_url').setAttribute('content', location.href);

document.getElementById('meta_og_title').setAttribute('content', title);

document.getElementById('meta_og_description').setAttribute('content', title);

}

그럼 공통함수 객체에서 해당 제목을 메타태그에 setAttribute하는 방식이구요.

이런식으로 구성을하였더니 실제 웹에서 소스를 보면 메타태그가 set되어있긴한데

카카오톡같은 소셜메신저에서 해당 url을 보내면 og태그가 적용되지않은형태로 메세지가 작성됩니다.

혹시 og태그를 각 페이지마다 설정하신분들이 계신다면

어떤방식으로 라이프사이클을 잡으셨는지좀 알고싶습니다~