[Nuxt] SEO 적용하기
SEO (검색엔진최적화)
SEO는 웹사이트나 웹페이지가 검색 엔진에서 높은 순위를 가질 수 있도록 최적화하는 작업이며, 크롤링, 인덱싱, 랭킹이 포함된다. SEO를 효과적으로 보여주기 위해서는 검색 엔진의 크롤러가 콘텐츠를 이해하고 인덱싱할 수 있도록 웹페이지를 구성하고, 사용자에게 유용하고 품질 높은 콘텐츠를 제공하는 것이 중요하다.
크롤링
크롤링은 검색 엔진 로봇 또는 크롤러가 웹 페이지를 탐색하고 데이터를 수집하는 과정이다. 크롤러는 웹 페이지의 링크를 따라가며 새로운 페이지를 찾고, 검색 엔진의 데이터베이스에 추가한다.웹 페이지의 콘텐츠, 링크 구조, 이미지 등을 수집하여 검색 엔진이 해당 페이지를 이해할 수 있어야 한다.
인덱싱
인덱싱은 검색 엔진이 수집한 웹 페이지의 정보를 색인화하여 검색 결과에 효과적으로 제공할 수 있도록 하는 과정이다. 수집된 데이터 중에서 특정 키워드, 문구, 링크 등을 추출하여 색인을 생성하고, 검색 시에 빠르게 결과를 반환할 수 있도록 한다.
랭킹
랭킹은 검색 결과에서 각 웹 페이지의 순위를 결정하는 과정이며, 검색 엔진은 사용자가 입력한 검색어에 가장 관련성이 높은 웹 페이지를 상위에 표시한다. 랭킹은 다양한 요소에 영향을 받는데, 이는 검색 알고리즘의 복잡한 계산과 사용자 경험, 웹페이지의 품질 등이 종합적으로 반영된 결과이다.
Nuxt에 SEO 적용하기
nuxt.config에 설정하기
nuxt.config에 파일에 추가하면 전역으로 설정되어 프로젝트 전반에 적용된다. 아래와 같이 파일에 추가하면,
<head> </head>태그 안에 설정된 것을 확인할 수 있다. 그러나 반응적인 데이터를 특정 페이지에 동적으로 제공하는 데는 적합하지 않을 수 있으며, 페이지 컴포넌트 내에서 useHead 함수나 head 메소드를 사용하여 해결할 수 있다.
hid 속성은 Nuxt.js에서 사용되는 속성으로, Head요소의 고유한 식별자를 지정한다. hid는 중복된 헤드 요소를 방지하고 특정 페이지나 컴포넌트에서 동일한 식별자를 사용하지 않도록 하며, 동적으로 생성되는 페이지에서 사용될 때 유용하다.
export default defineNuxtConfig({
app: {
head: {
charset: "utf-8",
viewport: "width=device-width, initial-scale=1",
title: "Nuxt Shopping",
meta: [
{
hid: "description",
name: "description",
content:
"Nuxt Shopping - 품질 좋은 다양한 상품들을 만나보실 수 있습니다.",
},
{
name: "keywords",
content: "쇼핑, 의류, 운동, 악세사리",
},
{ name: "author", content: "author" },
{ name: "og:type", property: "website" },
{ name: "og:site_name", property: "Nuxt shopping" },
{ name: "og:title", property: "og:title", content: "Nuxt Shopping" },
{
name: "og:description",
property: "og:description",
content:
"Nuxt Shopping - 품질 좋은 다양한 상품들을 만나보실 수 있습니다.",
},
{
name: "og:image",
property: "og:image",
content: "image주소",
},
{ name: "twitter:card", content: "summary" },
{ name: "twitter:title", content: "Nuxt Shopping" },
{
name: "twitter:description",
content:
"Nuxt Shopping - 품질 좋은 다양한 상품들을 만나보실 수 있습니다.",
},
{ name: "twitter:image", content: "image주소" },
],
},
},
});useHead에 설정하기
useHead 함수는 개별 컴포넌트 또는 페이지에서
<head>태그의 내용을 동적으로 설정하는 데 사용되며 페이지마다 설정할 수도 있다. useHead에 들어갈 수 있는 속성들은 tite, titleTemplate, base, link, meta, style, script, noscript, htmlAttrs, bodyAttrs가 있다.
- title: 페이지의 제목을 설정하며, 페이지마다 독립적으로 설정할 수 있다
- titleTemplate: 페이지 제목에 적용되는 템플릿이며, %s를 사용하여 동적인 제목을 구성할 수 있다.
- base: HTML의 태그를 설정하며, 기본 URL이나 타겟을 변경하는 데 사용된다.
- link: 파비콘이나 외부 스타일시트 등의 페이지의 외부 리소스와의 관련된 설정이다.
- meta: 페이지의 메타데이터를 설정하며, 검색 엔진 최적화 및 소셜 미디어 공유를 위한 정보이다.
- style: 페이지에 적용할 스타일을 설정한다.
- script: 페이지에 추가할 스크립트를 설정한다.
- noscript: 브라우저가 자바스크립트를 지원하지 않을 때 표시되는 내용을 설정한다.
- htmlAttrs: 언어 설정과 같은 전역적인 설정이며, HTML 태그에 적용할 속성이다.
- bodyAttrs: 스타일이나 스크립트 적용과 관련된 설정이며,
<body>태그에 적용할 속성이다.
useHead type
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[]
htmlAttrs?: HtmlAttributes
bodyAttrs?: BodyAttributes
}useHead와 useSeoMeta 사용
useHead({
title: "Nuxt Shopping",
meta: [
{
name: "description",
content:
"Nuxt Shopping - 품질 좋은 다양한 상품들을 만나보실 수 있습니다.",
},
{
name: "keywords",
content: "쇼핑, 의류, 운동, 악세사리",
},
{ name: "author", content: "author" },
],
});
useSeoMeta({
ogTitle: "Nuxt Shopping",
ogType: "website",
ogSiteName: "Nuxt shopping",
ogDescription:
"Nuxt Shopping - 품질 좋은 다양한 상품들을 만나보실 수 있습니다.",
ogImage: "https://example.com/image.png",
});useHead titleTemplate 사용
useHead({
htmlAttrs: {
lang: "en",
},
link: [
{
rel: "icon",
type: "image/png",
href: "/favicon.png",
},
],
titleTemplate: "%s - JUNGMIN",
});
useHead({
title: "Main Page",
});useSeoMeta 사용하기
useSeoMeta 함수는 SEO 메타데이터를 관리할 수 있으며, 특정 조건이나 데이터에 기반하여 SEO 관련 정보를 동적으로 설정할 수 있다. 상품페이지와 같이 들어오는 데이터에 따라 페이지 정보가 달라질 경우에 그 페이지에 맞는 상품정보가 담길 수 있도록 설정하였다.
useSeoMeta({
title: `Nuxt Shopping / ${productData.value.name}`,
description: () =>
`description: ${productData.value.name}. 나만의 스타일을 완성해보세요!`,
ogTitle: "Nuxt Shopping",
ogType: "website",
ogSiteName: "쇼핑몰입니다",
ogDescription: "This is my amazing site, let me tell you all about it.",
ogImage: "https://example.com/image.png",
});참고자료
https://web.dev/articles/rendering-on-the-web?hl=ko
https://hypemarc.com/seo-crawling-indexing
https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering?hl=ko
https://js-web.tistory.com/55
https://nuxt.com/docs/guide/concepts/rendering#universal-rendering
0개의 댓글
