SEO
- 사이트를 검색 결과에 잘 노출될 수 있도록 하는것이다.
- 검색봇을 이용해서 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다.
- 규칙을 지켜 코드를 작성한다면 검색 결과 상위에 노출되어 보다 많은 트래픽 유도 가능하다.
다이나믹 메타태그 생성
- getServerSideProps을 사용해 다이나믹 메타태그를 생성해준다.
getServerSideProps는 SSR을 구현하기 위한 함수로, 페이지 요청시 실행되어 이 함수에서 반환된 props가 포함되어 페이지가 pre-render된다.(next에서 돌아가는 함수)
import Head from "next/head";
// 렌더링 파트
export default function Post({
post
}: Props) {
return (
<div>
<Head>
<title>{post.title} | chanstory</title>
<meta name="description" content={post.content} />
<meta name="keywords" content={post.tags} />
</Head>
<div>
// ... view
</div>
</div>
);
}
// SSR 파트
export const getServerSideProps = async function ({
req,
query,
}: NextPageContext) {
const id = Number(query.id); // postId
// 데이터 load api를 호출하여 post data load
const post = await client.post.findUnique({
where: { id: +id }
});
return {
props: {
post
},
};
};태그의 적절한 사용
- h1태그는 페이지당 하나만 사용 (사이트 로고/타이틀)
- 시맨틱태그 적절히 활용 (nav, header, footer, h1~h6등)
이미지 최적화
- 파일명과 alt속성값을 잘 기재해주어야한다.
- 이미지 크기를 최적화하면 페이지 로딩속도가 빨라진다.
SSR(서버사이드렌더링)을 이용한 페이지 구성
- Next.js을 사용한 SSR페이지 구성
Link
- Link를 styled component 속성을 사용할때 passHref속성을 써야한다.
(passHref는 Link에서 하위 컴포넌트로 href속성을 전달해주는 역할을 한다.
passHref가 빠져있을경우 코드상 href가 빠져보여 seo에 치명적이게 된다.) - Link태그의 prefetch기능이 있는데 href에 있는 소스들을 미리 불러온다는 뜻이다.
(더 빠른 페이지의 전환을 위해 꺼두는게 좋다.)
<Link href="/" prefetch="false" passHref>
text
</Link>