9_1. SEO 최적화와 OG 태그 - 메타 태그 설정 방법 안내
nuxt.js
2023.03.06.
- vue 프로젝트 저장소
- github nuxt-shopping 배포 저장소 url
- github nuxt-shopping fake API 서버 저장소
- 해봐야될거 + 문제점
- 나중에 아임포트 결재모듈도 붙여보기
- 문제점 1: 새로고침하면 장바구니에 담아놓은 목록들이 다 사라짐
- 해결책
- 브라우저 레벨에서 해결: 로컬스토리지, 세션스토리지, 쿠키
- 카트에 담았을 때, 해당 상품 데이터를 서버로 전송
- 카트 목록 페이지 들어갈 때마다 계정별로 해당 목록을 불러오는 방법
- 해결책
- 문제점 2: 이미 카트에 담은 목록 또 담을 수 있음
- json-server /carts POST API 알아서 같은 값이면 500 에러 뱉어줌
9_1. SEO 최적화와 OG 태그 - 메타 태그 설정 방법 안내
nuxt 엡에 메타 태그 설정 방법에 대해 알아보도록 하겠다.
netlify 를 통해 배포된 사이트를 카카오톡으로 공유해보도록 하겠다.
9_1_1. netlify 로 배포된 사이트를 카카오톡으로 공유
위의 learn-nuxt는
위 페이지의 title이다.
여기를 눌러 링크를 확인하세요.는 meta에 description 속성을 추가해서 사이트에 대한 설명을 추가했으면 다른 내용이 나올 것이다.
그런 설정이 되어있지 않기 때문에, 위 사이트에 대한 정보가 명확하게 드러나있지 않다. (기본값으로만 나온다.)
그래서 이런 사이트에 대한 기본 설정을 meta 태그로 정의를 하는데 nuxtjs에서 meta 태그 설정은 어떻게 하는지 살펴보도록 하겠다.
9_1_2. 메타 데이터란?
사이트에 대한 부가적인 정보, 이 사이트가 어떤 사이트다 라는걸 설명하는 것이 metadata이다.
head 태그 안에 meta 태그로 접근 가능하다.
이런 설정들을 위해 nuxtjs는 어떤식으로 접근하는지, 페이지별로 혹은 전체 어플리케이션에 어떻게 추가하는지 방법을 보도록 하겠다.
9_1_3. 페이지 메타 정보 설정
nuxt 에서 페이지의 메타(meta) 태그 정보를 설정하는 방법에 대해 알아보자.
9_1_3_1. 페이지 head 태그 설정
nuxt 로 제작된 애플리케이션의 head 태그 값은 기본적으로 nuxt 설정 파일에 정의되어 있다.
// nuxt.config.js
export default {
// ...
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'learn-nuxt',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// ...
}위와 같이 정의된 metadata가 아래와 같이 빌드될 것이다.
SSR이면 아래와 같이 직접적으로 meta 태그가 들어가있진 않겠지만, 서버사이드 렌더링에서 아래와 같이 랜더링을 해준 다음에 브라우저로 보내준다.
<!doctype html>
<html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
<head>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="">
<meta data-n-head="ssr" name="format-detection" content="telephone=no">
<title>learn-nuxt</title>
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="preload" href="/_nuxt/26acd26.js" as="script">
<link rel="preload" href="/_nuxt/b3d7e49.js" as="script">
<link rel="preload" href="/_nuxt/4b137ba.js" as="script">
<link rel="preload" href="/_nuxt/9bc5f7a.js" as="script">
<link rel="preload" href="/_nuxt/51b98f4.js" as="script">
<style data-vue-ssr-id="f6b0088c:0 46f23c9d:0 6c71bd74:0 0fee2c0c:0 879c157c:0">*, :after, :before {
box-sizing: border-box
}
*, :after, :before, body, html {
font-family: "Exo 2", sans-serif
}
body, html {
color: #132c33;
font-size: .75em;
height: 100%;
line-height: 1;
width: 100%
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
border: 0;
font-family: "Exo 2", sans-serif;
font-size: 100%;
font: inherit;
font-weight: 500;
margin: 0;
padding: 0;
vertical-align: top
}
a {
background-color: transparent;
border: 0;
cursor: pointer;
font-weight: 500;
margin: 0;
outline: 0;
padding: 0;
-webkit-text-decoration: none;
text-decoration: none
}
.title {
color: #00c58e;
font-size: 1.5rem;
font-weight: 700
}
.nuxt-progress {
background-color: #000;
height: 2px;
left: 0;
opacity: 1;
position: fixed;
right: 0;
top: 0;
transition: width .1s, opacity .4s;
width: 0;
z-index: 999999
}
.nuxt-progress.nuxt-progress-notransition {
transition: none
}
.nuxt-progress-failed {
background-color: red
}
header[data-v-3776867c] {
align-items: center;
display: flex;
height: 60px;
padding: 0 .5rem
}
.logo[data-v-3776867c] {
font-weight: 900
}
.logo[data-v-3776867c]:visited {
color: inherit
}
.flex[data-v-b1838b1a] {
display: flex;
justify-content: center
}
.item[data-v-b1838b1a] {
cursor: pointer;
display: inline-block;
height: 300px;
margin: 0 .5rem;
text-align: center;
width: 400px
}
.product-image[data-v-b1838b1a] {
height: 250px;
width: 400px
}
.app[data-v-b1838b1a] {
position: relative
}
.cart-wrapper[data-v-b1838b1a] {
bottom: 50px;
float: right;
position: sticky;
right: 50px
}
.cart-wrapper .btn[data-v-b1838b1a] {
display: inline-block;
font-size: 1rem;
font-weight: 500;
height: 40px
}
.input-wrapper[data-v-7d925b4c] {
height: 40px;
margin: 1rem 0
}
.search-input[data-v-7d925b4c] {
width: 200px
}
.btn[data-v-7d925b4c], .search-input[data-v-7d925b4c] {
font-size: 1.2rem;
font-weight: 500
}</style>
<link rel="preload" href="/_nuxt/static/1678082955/state.js" as="script">
<link rel="preload" href="/_nuxt/static/1678082955/payload.js" as="script">
<link rel="preload" href="/_nuxt/static/1678082955/manifest.js" as="script">
</head>
<body>
<!-- ... -->
</body>
</html>
위와 같이 head 태그 안의 meta 태그들이 설정된 것들과 nuxt.config.js 파일에 설정된 내용들을 비교해보면된다.