Nextjs Seo 최적화

seo 에 필요한 meta 들 정리.

<title>페이지 제목</title>

<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">
<link rel="canonical" href="http://www.mysite.com/article/article1.html">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="description" content="페이지 설명">

<meta name="application-name" content="어플에서 아이콘뺄때 나올 이름">
<meta name="msapplication-tooltip" content="ms 작업표시줄">
<meta name="description" content="페이지 설명">

<meta property="og:type" content="website"> 
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/myimage.jpg">
<meta property="og:url" content="http://www.mysite.com">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">
<meta name="twitter:domain" content="사이트 명">

next-seo
yarn add next-seo

_app.js

import { DefaultSeo } from 'next-seo';


<DefaultSeo
          keywords="cake for a party, coffee"
          additionalLinkTags={[
            {
              rel: "icon",
              href: "https://www.test.ie/favicon.ico",
            },
            {
              rel: "apple-touch-icon",
              href: "https://www.test.ie/touch-icon-ipad.jpg",
              sizes: "76x76",
            },
            {
              rel: "apple-touch-icon",
              href: "https://www.test.ie/touch-icon-iphone-retina.jpg",
              sizes: "120x120",
            },
          ]}
          additionalMetaTags={[
            {
              name: "application-name",
              content: "심리상담 마인드케어센터",
            },
            {
              name: "msapplication-tooltip",
              content: "마인드케어센터",
            },
            {
              name: "viewport",
              content: "width=device-width, initial-scale=1",
            },
          ]}
          openGraph={{
            type: "website",
            locale: "ko_KR",
            site_name: "심리상담 마인드케어센터",
          }}
          twitter={{
            handle: "@handle",
            site: "mindcarecenter.org",
            cardType: "summary_large_image",
          }}
        />

각 페이지마다

 <NextSeo
        canonical="https://www.canonical.ie/b"
        title="Article Page Title"
        description="Description of article page"
        openGraph={{
          type: "website",
          title: "Open Graph Article Title",
          description: "Description of open graph article",
          url: "https://www.example.com/articles/article-title",
          // Multiple Open Graph images is only available in version `7.0.0-canary.0`+ of next
          images: [
            {
              url: "https://www.test.ie/og-image-article-title-01.jpg",
              width: 1200,
              height: 630,
              alt: "Og Image Alt Article Title A",
            }           
          ],
          site_name: "심리상담센터 마인드케어센터",
        }}
      />