getServerSideProps와 Head 태그로 검색 엔진 최적화하기
검색 엔진에 유리하다는 Next.js를 사용해보자!
# getServerSideProps 이용해서 API 데이터 가져오기
우선 코드 가장 하단에 getServerSideProps를 작성해주고 export default function에 { results } 형식으로 데이터를 가져온 뒤, 타입을 지정해주면 된다.
// TypeScript 이용 시 타입 지정을 위해 아래 내용을 import 해주기
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
export default function Home({results }: InferGetServerSidePropsType<typeof getServerSideProps>) {
// 생략
return (
// 생략
);
}
// 코드 가장 하단에 다음과 같이 적어주기
export const getServerSideProps: GetServerSideProps = async () => {
const results = await (
await fetch(
`http://API데이터주소`
)
).json();
return {
props: {
results,
},
};
};
이렇게 getServerSideProps로 API 데이터를 가져오면, 데이터가 서버에서 미리 렌더링되어 HTML로 넘어오기 때문에 검색엔진에 유리해진다. HTML 문서에 API 데이터가 그대로 나타나는 것을 볼 수 있음!
# Head 태그를 이용하여 meta 태그와 og 태그 이용하기
Next.js는 Head 태그를 지원한다. Head 태그 내부에 meta 태그와 og 태그를 이용하여 검색 엔진 최적화를 구현할 수 있다.
import Head from "next/head";
<Head>
<title>웹 페이지 이름</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="이름" />
<meta
name="description"
content=""
/>
<meta
property="og:url"
content="배포된 웹 페이지의 url"
/>
<meta property="og:title" content="og 웹 페이지 이름" />
<meta
property="og:image"
content="og 이미지 주소" />
<meta
property="og:description"
content="og 설명란"
/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="ko_KR" />
</Head>
각 태그의 의미를 알아보자
1. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
뷰포트(Viewport)를 설정하는데 사용된다. 뷰포트란 디바이스의 화면에 나타나는 영역을 의미하는데, 모바일 기기의 경우 스크린의 크기가 다양하므로, 이 태그를 사용하여 디바이스의 화면 크기를 웹 페이지를 화면에 맞게 렌더링할 수 있다.
content 속성에서 width=device-width는 뷰포트의 너비를 디바이스의 스크린 너비로 설정하라는 의미이고, initial-scale=1.0은 초기 화면 배율을 1로 설정하라는 의미이다. 이를 통해 사용자가 웹 페이지를 처음 방문할 때, 페이지가 확대되거나 축소되지 않고, 디바이스의 너비에 맞춰 전체 화면이 보여지게 된다.
2. <meta name="author" content="이름" />
현재 문서의 저자를 나타내는 메타 태그로, 이 메타 태그는 검색 엔진에서 문서를 색인하는 데 사용되기도 하고, 브라우저에서 문서를 렌더링하는 동안에도 사용될 수 있다.
3. <meta name="description" content="">
웹페이지의 설명을 설정하는 메타 태그로, 이 태그를 이용하여 검색 엔진이나 SNS에서 웹페이지를 설명하는 텍스트를 노출할 수 있다. content 속성에는 주로 해당 페이지의 간단한 설명을 적는다.
웹 페이지 링크를 카카오톡으로 공유할 때 미리보기 화면이 뜨는 것을 본 적이 있을 것이다. 이처럼 웹 페이지가 SNS에서 공유될 때 og 태그를 이용하면 미리보기에서의 이미지, 웹 페이지 이름, 설명 등을 설명할 수 있다.
4. <meta property="og:url" content="url주소" />
property 속성에 og:url을 지정하여 현재 페이지의 URL 주소를 나타내고, content 속성에는 URL 주소를 입력하면 SNS에서 웹페이지를 공유할 때 해당 페이지의 URL 주소를 전달한다.
5. <meta property="og:title" content="og 웹 페이지 이름" />
SNS 공유 시 표시되는 웹 페이지의 이름을 설정한다.
6. <meta property="og:image" content="og 이미지 주소" />
SNS 공유 시 표시되는 웹 페이지의 이미지를 설정한다.
7. <meta property="og:description" content="og 설명란" />
SNS 공유 시 표시되는 설명란의 내용을 설정한다.
8. <meta property="og:type" content="article" />
SNS 공유 시 웹 페이지의 컨텐츠 유형을 정의하는 데 사용된다. 예를 들어 "article"이라는 값을 입력하면 해당 페이지가 글 형태의 컨텐츠임을 나타낸다.
9. <meta property="og:locale" content="ko_KR" />
SNS 공유 시 웹 페이지의 언어를 설명하는 것에 사용된다.
참고 자료
'FE - Tools > Next.js' 카테고리의 다른 글
| [Next.js] Next.js 알아보기 (0) | 2022.12.08 |
|---|
