1. Next.js 검색엔진 최적화

1. 목적

• 검색했을 때 노출이 잘되도록, SEO을 한다.

2. 주요 기능 목록

1. Title, Open Graph 등 Meta 설정

2. 개발 일정

• 시작일: 7/29
• 종료 예정일: 7/30

5. 개발

1. meta 태그

1. 정적인 사이트 : metaData 활용

   // app/layout.tsx
   export const metadata: Metadata = {
     title: 'Guesung Blog',
     description: 'Welcome to Guesung Blog!',
     verification: {
       google: '..',
       other: {
         'naver-site-verification': '..',
       },
     },
   };
   
   

   바깥에 선언하면 된다.

2. 동적인 사이트 : generateMetadata 활용

   // app/[...series]/[slug]/page.tsx
   export async function generateMetadata(
     { params }: PageProps,
     parent: ResolvingMetadata
   ): Promise<Metadata> {
     const slug = params.slug;
   
     const content = getContent({
       slug: typeof slug === 'string' ? slug : slug.join('/'),
     });
   
     const previousImages = (await parent).openGraph?.images || [];
   
     return {
       title: content.title,
       openGraph: {
         images: [content.coverSrc, ...previousImages],
       },
     };
   }
   

결과

2. JSON-LD스키마

<aside> 💡 JSON-LD?

: JSON을 사용하여 링크드 데이터를 인코딩하는 방식으로, 이러한 구조적 데이터를 스크립트에 추가함으로써 검색 엔진이 크롤링해갈 때 ‘이런 구조 있어요’를 알리는 것이다.

자세한 내용 : JSON.ld

</aside>