[1018] 서치라이트 17일차

Today's Tasks

• KAN-152 - FE 블로그 SSR로 교체 (+ SEO 관련 세팅) 진행
  • 블로그 sitemap 적용
  • 블로그 open graph 적용
    • 동적으로 생성 (이미지 - 썸네일, title - 제목, description - 3줄)

Learnings and Questions

동적으로 open graph 생성하기

일반 미리보기	블로그 미리보기

일반 페이지는 블로그 상세 페이지는 미리보기를 일정하게 보여주지만,
이미지는 해당 게시물의 썸네일로, 제목은 게시물의 슬러그로, 설명은 게시물의 내용으로,
동적으로 보여줘야 한다. 따라서 Next.js의 generateMetadata 기능을 사용해주었다.

    // src/app/(root)/blog/[slug]/page.tsx

    export const generateMetadata = async ({
      params: { slug },
    }: DetailPageParams): Promise<Metadata> => {
      const decodedSlug = decodeURI(slug);
      const { data: post } = await api.post.getPostDetailBySlug(decodedSlug);

      return {
        openGraph: {
          title: decodedSlug,
          description: post
            ? truncateString(extractContent(post.content), 100)
            : '존재하지 않는 게시물입니다.',
          url: `https://searchright.net/blog/${decodedSlug}`,
          images:
            post?.thumbnail ?? 'https://searchright.net/static/landing_meta.png',
          type: 'website',
          locale: 'ko_KR',
        },
      };
    };

• 미리보기는 baseURL로 하려고 했으나 미리보기에 적용되지 않았다. (일단 기본이미지로 씀)
• 블로그 내용은 너무 길기 때문에 100자까지만 보이도록 하였다.

동적으로 sitemap 생성하기

방법 1

• generateSiteMaps 라는 Next.js 기능을 사용하려고 했는데, 적용을 해보니 한 sitemap 파일 당 게시물 하나의 정보가 적혀있어서 그냥 다른 방법을 쓰기로 했다.

방법 2

• sitemap.xml 에서 게시물들 정보를 가져온 후, spread operator로 연결해주었다.

    import { MetadataRoute } from 'next';

    import api from '@/api';

    export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
      const BASE_URL = 'https://searchright.net';
      const { data: posts } = await api.post.getPostList();

      return [
        {
          url: `${BASE_URL}/`,
        },
        {
          url: `${BASE_URL}/blog/`,
        },
        ...(posts
          ? posts.map((post) => ({
              url: `${BASE_URL}/blog/${post.slug}/`,
              lastModified: post.updatedAt,
            }))
          : []),
      ];
    }

Plan for Tomorrow

• KAN-165 - Sentry 설정 시작
• 블로그 - 3번째 게시물 업로드