몇달전 Vue환경에서 메타(Meta) 태그와 OG(Open Graph)정보들을 데이터 크롤링을 통해 설정하여 단말기에서 공유되는 앱 실행 링크 페이지를 개선하기로 하였다. 결과적으로는 실패..🤔 정확히는 실패보다는 현재 환경으로는 적용할수가 없었는데 메타(Meta) 태그와 OG(Open Graph)에 대해서 정리할겸 해당 이슈내용에 대해서 정리하고자 한다.
메타(Meta) 태그란?
메타(Meta) 태그는 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그로 HTML 문서 내에서 < head > 요소 아래에 배치되며 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않지만 검색엔진에서는 설정한 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 된다.
이를 SEO(Search Engine Optimization) 검색엔진 최적화 라고 한다.
쉽게 말하면 Google에 검색시에 메타(Meta)를 설정해준다면 더 정확하고 쉽게 검색페이지에 노출된다는 것
<meta
name="description"
content="이렇게 작성하면 되는거죠??."
/>적용할 수 있는 메타(Meta)태그는 정말 많지만 SEO에서 가장 중요한 요소로는 name 과 content가 있다. 이를 잘 활용하면 < title > 요소로 담지 못했던 웹페이지에 대한 좀 더 상세한 설명을 담을 수가 있게된다.
오픈 그래프(Open Graph)란?
오픈 그래프(Open Graph)는 메타(페이스북)에서 개발한 프로토콜로 특정 페이지(URL)를 공유 시 해당 웹페이지의 콘텐츠를 미리보기 형식으로 확인 할 수 있도록 설정하는 방식이다.
아래 이미지와 같이 카카오톡 등과 같은 메신저로 공유시 공유한 사이트의 정보를 확인할 수 있다.
대표적으로 적용해야하는 OG태그는 총 세가지로 og:title og:description og:image 가 있다.
웹페이지의 제목
<meta name="og:title" content="메타 태그"/> 웹페이지의 상세 설명
<meta name="og:description" content="메타(Meta) 태그와 OG(Open Graph)에 대해서 알아보자"/>웹페이지 썸네일(thumbnail) 이미지 주소
<meta name="og:image" content="https://www.meta/og.png"/> Vue에서 오픈 그래프(Open Graph)적용하기
개요
메타와 og를 적용하기 위해 나는 vue-meta를 install하고 앱 실행 링크 페이지(appLink.vue)에서 metaInfo()를 정의하여 페이지의 < head >태그 내에 해당 페이지에서 설정한 meta태그의 og정보가 동적으로 변경되는 것을 확인하기 위해 개발배포 후 테스트를 진행하였다.
문제점
vue-meta를 사용한 결과 앱 실행링크 페이지 접속 시 동적으로 바인딩한 og정보가 < head >태그 내에 정상적으로 보여지는것을 확인하였지만 URL을 공유 시 설정한 og태그는 앱 실행 링크 페이지(appLink.vue)에서 설정한 데이터가 아닌 index.html에서 설정한 기본 meta태그의 데이터들이 보여지는 문제점을 발견하였다..
테스트
이러한 문제점으로 인해 여러번의 테스트를 진행하여 해당 문제점을 파악하기로 하였다.
- metaInfo() 정의 시 vmid속성을 사용하여 appLink.vue에서 정의한 meta태그가 index.html meta태그보다 우선순위를 가질 수 있도록 설정
- index.html의 meta태그를 삭제하고 appLink.vue의 meta태그만 정의하여 앱 실행 링크 페이지의 og정보만 보여지도록 수정
- prerender-spa-plugin을 vue-meta와 함께 사용하여 동적으로 og정보가 변경될 수 있도록 시도
- route의 appLink.vue를 import시 설정한 webpackChunkName 주석 삭제
결과적으로는 위의 테스트 내용 모두 실패하였다..😵😅
원인 및 결과
- Vue와 같은 SPA환경에서는 SEO와 url 공유시 해당 페이지의 og정보를 전달해주기 위해 Nuxt.js 또는 prerender사용을 통해 SSR방식으로 meta정보를 설정해 줘야 한다는 것을 알게되었다.
- 프로젝트 생성시 사용해야 하는 Nuxt.js와 동적으로 페이지를 구상해야하는 상황에서 prerender의 사용은 현재의 상황에서는 사용하기 적합하지 않기 때문에 다른 방안이 필요하다고 결론을 냄.
아무래도 이미 Nuxt.js를 사용하지 않고 프로젝트를 생성한 상황에서 og태그 때문에 프로젝트를 갈아 엎을 수는 없을 노릇이였기 때문에 아쉽지만 해당내용은 잠정 보류하기로 하였다..
그렇지만 이를 해결하기 위해 쌓은 여러 정보들과 여러번의 테스트를 통한 해결방안과 결과를 얻을 수 있었기 때문에 많은 공부가 되었다고 생각했다.
다음에는 이어서 서버사이드 랜더링(SSR)에 대해서 내용을 정리해보기로..
