FE Chapter문서
접근 가능한 페이지 제목과 문서 구조 가이드
문서
페이지 제목
구체적인 페이지 제목은 사용자와 검색엔진 최적화 (SEO) 모두에 유용하지만 너무 많은 키워드를 추가하지는 마세요. 제목은 AT 사용자가 페이지를 방문할 때 처음으로 발표되는 제목이므로 정확하고 고유하며 서술적이면서도 간결해야 합니다.
페이지 제목을 작성할 때는 내부 페이지나 중요한 콘텐츠를 먼저 '프런트로드'한 다음 앞부분에 페이지 또는 정보를 추가하는 것이 좋습니다. 이렇게 하면 AT 사용자가 이미 들어본 정보를 일일이 살펴볼 필요가 없습니다.
금지사항
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>권장사항
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>검색엔진은 일반적으로 페이지 제목의 처음 55~60자만 표시하므로 전체 페이지 제목 문자를 제한해야 합니다.
코드 구현
정적인 타이틀
routes에 staticMetadata property로 정의
...
'/my-note': {
href: () => `/my-note`,
staticMetadata: {
title: '나만의 노트',
},
},
...동적인 타이틀
dynamicMetadata에 비동기 함수로 정의
dynamicMetadata: async ({ groupId }) => {
const result = await apolloClient.query({
query: gql`
query DynamicMetadata_myGroup($groupId: ID!) {
group(id: $groupId) {
id
name
}
}
`,
variables: { groupId },
});
return {
title: titleSplitter([result?.data?.group?.name ?? '', '피드 및 플랜']),
};
},react로 그리기
DynamicHeader, StaticHeader를 mount해서 넣어 주거나 nextjs metadata 활용
<DynamicHeader path="/my-group/[groupId]" params={{ groupId }} />
<StaticHeader path="/curriculum" />