SEO를 알아보자 Search Engine Optimization

• Technical SEO
• On-Page SEO
• Off-page SEO

Technical SEO 이란

On-Page SEO 이란

Off-page SEO 이란

Technical SEO 최적화 작업을 알아보자.

위 사진은 제 블로그 Performance 점수입니다.

• FCP : 웹 페이지에서 첫 번째 콘텐츠가 렌더링되기까지 걸리는 시간
• LCP : 페이지에서 가장 큰 콘텐츠가 렌더링되는 시간
• TBT : 페이지가 로드되는 동안 사용자가 상호작용할 수 없는 시간의 총합
• CLS : 페이지 로드 중 레이아웃이 얼마나 자주, 얼마나 크게 이동하는지를 측정
• SI : 페이지가 시각적으로 완성되는 데 걸리는 시간

Next.js App Router 에서 SiteMap 생성방법을 알아보자

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

import type { MetadataRoute } from 'next';
import { useReadMdx as ReadMDX } from '../hooks/useReadMdx';
import { MDX } from '@/interface';
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://bittenlog.vercel.app';

  const posts: MDX.Metadata[] = (await ReadMDX()) as MDX.Metadata[];
  const indexPage = {
    url: baseUrl,
    lastModified: new Date().toISOString().split('T')[0],
  };
  const article = posts?.map((post) => {
    return {
      url: `${baseUrl}/article/${post.path}`,
      lastModified: new Date(post.date).toISOString().split('T')[0],
    };
  });

  return [indexPage, ...article];
}

이게 끝이야?

import type { MetadataRoute } from 'next';

export async function generateSitemaps() {
  return [{ id: 'test1' }, { id: 'test2' }, { id: 'test3' }];
}

export default async function sitemap({ id }: { id: string }): Promise<MetadataRoute.Sitemap> {
  const products = new Array(5000).fill(null).map((_, index) => ({
    id: index + 1,
    date: new Date().toISOString(),
  }));
  return products.map((product) => ({
    url: `http://localhost:3000/product/${product.id}`,
    lastModified: product.date,
  }));
}

 ● /sitemap/[__metadata_id__]           0 B                0 B
    ├ /sitemap/test1.xml
    ├ /sitemap/test2.xml
    └ /sitemap/test3.xml

On-Page SEO 최적화 작업을 알아보자.

메타 태그

export const metadata = {
  title: 'Blog',
  openGraph: {
    title: 'Blog',
  },
};

export const metadata: Metadata = {
  metadataBase: new URL('https://bittenlog.vercel.app'),
  title: {
    default: 'Bitten Dev',
    template: '%s | Bitten Dev',
  },

  category: 'tech blog',
  description: '성장 욕구가 많은 개발자로서, 공부한 내용을 정리하는  개발 블로그 입니다.',
  authors: [{ name: '비튼', url: 'https://bittenlog.vercel.app' }],

  openGraph: {
    images: ogImage.src,
    title: {
      default: 'Bitten Dev',
      template: '%s | Bitten',
    },
    description: '성장 욕구가 많은 개발자로서, 공부한 내용을 정리하는 개발 블로그 입니다.',
  },
  verification: {
    google: 'uBovfhvYdbEJvqXAGE44EfvyNswgNRSOmXXEApmtV_g',
  },
};

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const data = await getFiles(params.slug);
  if (!data) return {};
  return {
    title: data.meta.title,
    description: data.meta.description,
    openGraph: {
      images: data.meta.thumbnail,
    },
    keywords: [...(data.meta.tags ?? [])],
  };
}

openGrap

Off-page SEO 최적화 작업을 알아보자

마치면서