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스키마

💡 JSON-LD?

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

자세한 내용 : JSON.ld

const jsonLdData = {
  '@context': 'https://schema.org',
  '@type': 'WebPage',
  name: 'Guesung Blog',
  description: '안녕하세요, 프론트엔드 개발자 박규성입니다.',
  keywords: 'blog, frontend, javascript, react',
  url: 'https://blog.guesung.site',
  image:
    'https://github.com/user-attachments/assets/5c8b9ef8-1a2b-4ecc-b191-4ae95d4c5a00',
  author: {
    '@type': 'Person',
    name: 'https://www.linkedin.com/in/guesung',
  },
  datePublished: '2024-07-30T11:35:00+07:00',
  dateModified: '2024-07-30T11:35:00+07:00',
  publisher: {
    '@type': 'Organization',
    name: '박규성 기술 블로그',
    logo: {
      '@type': 'ImageObject',
      url: 'https://github.com/user-attachments/assets/5c8b9ef8-1a2b-4ecc-b191-4ae95d4c5a00',
    },
  },
  headline: 'Guesung Blog',
  mainEntityOfPage: {
    '@type': 'WebPage',
    '@id': 'https://blog.guesung.site/series/posts/system',
  },
  articleSection: '시스템으로 성장하기',
  articleBody: '시스템을 사랑한 개발자',
  thumbnailUrl:
    'https://blog.guesung.site/_next/image?url=%2Fcontents%2Fposts%2Fsystem%2Fcover.png&w=1200&q=75',
};

// ..

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify(jsonLdData, null, 2),
  }}
/>

3 next-sitemap

💡 sitemap

: 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일

• 사이트맵을 통해 내가 사이트에서 중요하다고 생각하는 페이지와 파일을 검색엔진에 알리고 중요한 관련 정보를 제공한다.

link_preview

1. next-sitemap 설치

   yarn add next-sitemap

2. next-sitemap.config.js 설정

   /** @type {import('next-sitemap').IConfig} */
   module.exports = {
     siteUrl: process.env.SITE_URL || 'https://example.com',
     generateRobotsTxt: true, // (optional)
     // ...other options
   }

3. postbuild 스크립트 수정

   // package.json
   {
   	// ..
   	"build": "next build && next-sitemap",
   }

   빌드 후 next-sitemap을 통해 sitemap을 생성할 수 있도록 한다.