SEO
검색엔진최적화
Next에서는 page별로 메타태그를 설정할 수 있다.
//
import Head from "next/head"; // _document.tsx가 아닌 page는 전부 여기서 불러와야한다
export default function Home() {
return (
<>
<Head> // 브라우저 탭 페이지 이름 설정
<title>codemodel6</title>
<meta property="og:image" content="/내 이미지 경로"/>
<meta property="og:title" content="썸네일 제목"/>
<meta property="og:description" content="썸네일 내용"/>
</Head>
</>
}이런식으로 모든 페이지에 적용해준다. 상세페이지 혹은 변화가 있는 페이지는 해당 페이지의 서버에서 받아온 변수를 넣어주면 된다.
fallback으로 설정한 페이지는 메타태그들은 어디에도 없다. 그렇기 때문에 특정한 로직이 필요하다.
export default function Home() {
if(router.isFallback) { // fallback 상태일 때 로직에 추가
return (
<>
<Head> // fallback 상태일때 meta태그 반환
<title>codemodel6</title>
<meta property="og:image" content="/내 이미지 경로"/>
<meta property="og:title" content="썸네일 제목"/>
<meta property="og:description" content="썸네일 내용"/>
</Head>
</>
);
// 하단에는 기존 코드 작성
}
개발자가 되기 위한 일기