SEO

[godzz733]

SEO 최적화 방법

1. meta 태그
2. sementic 태그
3. SSR
4. 이미지 최적화
5. 성능 최적화
6. Structured Data
7. Next.js 기능

---

[godzz733]

meta 태그

• meta 태그란 웹사이트 정보를 명시하는 태그 -> 크롤링 봇이 크롤링을 해감

SEO에 도움 되는 meta 태그

1. <title/>
2. description
3. viewport
4. refresh redirect
5. open graph -> 미리보기를 위한 메타태그
   • url, type, title, description, image 등이 있음

실제 사이트의 meta 태그들

1. 네이버

   

2. 네이버 웹툰

   

3. 나무위키

   

• 참고로 나무위키에서 data-n-head=ssr 은 vue의 nuxt를 쓸 때 생기는 것임.

nextjs 에서 사용법

export async function generateMetadata({params}) {
  const product = await getDataFunc();
  return {
    title: product.name,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      url: `https://yourwebsite.com/posts/${product.name}`,
      images: [
        {
          url: product.name,
          alt: product.description,
        },
      ],
    },
  };
}

• generateMetadata() 라는 함수로 동적으로 meta 태그를 생성할 수 있음

JSON-LD

• meta 데이터와 유사하게 JSON-LD(JavaScript Object Notation for Linked Data) 것도 SEO에 도움이 될 수 있음

  export default async function Page({ params }) {
  const product = await getProduct(params.id); // 상품 데이터를 가져오는 함수
  
  const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: product.name,
  image: product.image,
  description: product.description,
  };
  
  return (
  <section>
    {/* JSON-LD를 페이지에 추가 */}
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* 페이지의 나머지 부분 */}
  </section>
  );
  }