SEO 최적화 하기

개요

• seo 도대체 무엇인가
• seo 왜 써야하는가?
• seo 어떻게 쓸 수 있는가?

seo 도대체 무엇인가?

검색엔진최적화를 의미하며 설정을 통해 검색 시 상단에 노출을 시키는 방법이다.

seo 지수 100점!!

seo 도대체 왜 써야하는가?

1. 현재 제공하려는 서비스의 형태는 플랫폼이다.
2. 플랫폼의 경우 사용자를 많이 유입 시키는 것이 중요하다.
3. 네이버나 구글 같은 서비스에 광고수수료를 지불하는 경우 일정 비용을 지출해야 한다.
4. seo 설정을 잘하면 위의 스크린샷처럼 수수료를 지불하지 않고도 상단에 띄울 수 있다. (네이버도 마찬가지이다.)

결론

• 사용자에게 컨텐츠를 노출시킴으로 우리의 서비스로 유입 시킬 수 있게한다.
• 코드만 짤줄알면 무료로 사용이가능한데 최적화 시키지 않을 이유가없다.

seo 어떻게 쓸 수 있는가?

💡 컨텐츠를 제공하는 각 사이트에서 제공하는 가이드를 보고 원하는 태그를 삽입해줄 것

Tip

개발자도구의 lighthouse를 통해 퍼포먼스 체크가 가능하다.

• title tag를 꼭 사용할 것
  • 간결하고 핵심적인 제목으로 넣을 것
  • 사용자가 접속하는 페이지에 따라 변경 되어야 함
    • 나 | 로 page title과 site name을 구분한다.
  • 로 나누는 것을 추천 한다 → <pageName - siteName>
• meta 태그를 사용하여 다음속성들을 넣어주자, 다음 속성들은 검색봇에 잘 노출되게 하여 검색엔진에 검색을 향상시킨다.
  • meta-description
  • meta-author
  • meta-title
  • charset
  • itemprop-name
  • itemprop-description
  • itemprop-image

예시 코드

// head 태그안에 작성할 것
<title key="title">{pageTitle}</title> //<pageName - siteName> 형태로 pageTitle 작성할 것
<meta key="meta-description" name="description" content={description} />
<meta key="meta-author" name="author" content={AUTHOR} />
<meta key="meta-title" name="title" content={pageTitle} />
<meta charSet="utf-8" />
<meta key="itemprop-name" itemProp="name" content={pageTitle} />
<meta key="itemprop-description" itemProp="description" content={description}/>
<meta key="itemprop-image" itemProp="image" content={`${DOMAIN}/${image}`}/>

• google search console 최적화, 구글 검색엔진 노출

// search console에서 고유의 키 생성하기
<meta name="google-site-verification" content={process.env.NEXT_PUBLIC_GOOGLE_SEARCH_KEY} />

• naver 웹마스터 도구, 네이버 검색엔진 노출

// 웹마스터 도구에서 고유의 키 생성하기
<meta name="naver-site-verification" content={process.env.NEXT_PUBLIC_NAVER_SEARCH_KEY} />

• facebook, 페이스북 글에 사이트 노출하기

<meta key="og:type" property="og:type" content="website" />
<meta key="og:title" property="og:title" content={page title} />
<meta key="og:image" property="og:image" content={image url} />
<meta key="og:description" property="og:description" content={description}/>
<meta key="og:site_name" property="og:site_name" content={app name} />
<meta key="og:locale" property="og:locale" content="ko_KR" />
<meta property="og:url" content={fullUrl} />

• twitter, 트위터 글에 사이트 노출하기

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={page title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image url} />

• naver html 마크업 최적화
  • 네이버 서치어드바이저 등록

<meta name="robots" content="index,follow" />
{/* 쿼리스트링에 따라 다른 페이지가 표시되므로 현재 페이지의 full URL을 넣어준다 */}
<link key="canonical" rel="canonical" href={DOMAIN} />

코드작성이 끝났다면? sitemap 등록하기

sitemap.xml 파일을 만들어 검색 봇이 크롤링 해가야 하는 사이트를 명시해주자.

• 구글에 sitemap만들기를 검색해서 sitemap을 쉽게 만들 수 있다.