[1017] 서치라이트 16일차

한별·2024년 11월 27일

서치라이트

목록 보기

18/40

Today's Tasks

KAN-152 - FE 블로그 SSR로 교체 (+ SEO 관련 세팅) 시작
- blog 상세 generateStaticParams로 변경
  - SEO에 좋은 정적 페이지로 변경
  - 기존에 있던 문제(블로그가 추가될 때마다 새로 배포해야 함)는 github actions의 workflow_dispatch를 이용하여 해결
- robots.txt
- (블로그 제외) open graph 적용
- (블로그 제외) sitemap.xml

Learnings and Questions

generateStaticParams

static export에서는 dynamic routing을 사용하기 위해서 generateStaticParams를 사용해야 한다

        // src/app/(root)/blog/[slug]/page.tsx
        export async function generateStaticParams() {
          const { data: posts } = await api.post.getPostList();

          return posts
            ? posts.map((post) => ({
                slug:
                  process.env.NODE_ENV === 'development'
                    ? encodeURI(post.slug)
                    : post.slug,
              }))
            : [];
        }

opengraph

SNS 공유 시 미리보기

opengraph 설정 후 테스트 = ngrok

generateMetadata

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',
    },
  };
};

robot.txt

검색엔진 크롤러(또는 검색 로봇)가 액세스 하거나 정보수집을 해도 되는 페이지가 무엇인지, 해서는 안 되는 페이지가 무엇인지 알려주는 역할을 하는 .txt (텍스트) 파일

    User-agent: Yeti
    Disallow: /not-for-naver/
    Sitemap: http://www.example.com/sitemap.xml

항상 사이트의 루트 디렉터리에 위치해야 함
사용하는 이유
- 검색엔진 크롤러의 과도한 크롤링 및 요청으로 인한 과부하 방지 (불필요한 요청 X)
- 검색엔진 크롤러의 일일 요청 수를 뜻하는 크롤 버짓 (또는 크롤링 예산 – Crawl budget) 낭비 방지
- 검색엔진 크롤러에게 사이트맵(sitemap.xml)의 위치를 제공하여 웹사이트의 콘텐츠가 검색엔진에게 더 잘 발견될 수 있도록 하기 위해서
구성
- User-agent: robots.txt 에서 지정하는 크롤링 규칙이 적용되어야 할 크롤러 지정
  - 구글: Googlebot
  - 네이버: Yeti
  - 다음: Daum
  - 빙: Bingbot
  - 덕덕고: DuckDuckBot
- Allow: 크롤링을 허용할 경로 (/ 부터의 상대 경로).
- Disallow: 크롤링을 제한할 경로 (/ 부터의 상대 경로).
- Sitemap: 사이트맵이 위치한 경로의 전체 URL (https:// 부터 /sitemap.xml 까지의 전체 절대경로 URL).

💡 Allow는 Disallow 보다 우선권을 가지므로 아래의 경우 Disallow는 무효화된다.
User-agent: Yeti
Disallow: /folder-depth-1/folder-depth-2/
Allow: /

sitemap.xml

내 사이트에 있는 페이지들의 목록
검색 로봇이 내 사이트의 콘텐츠를 잘 수집할 수 있도록 도움

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/</loc>
    <lastmod>2005-01-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>