Readme

What is SEO?

검색엔진 최적화(Search Engine Optimization, SEO)는 웹사이트의 방문자 수를 늘리기 위해 검색엔진의 검색 결과 페이지(SERP)에서 웹사이트의 순위를 높이는 프로세스입니다.

Todos

• URL 구조 : 사용자가 잘 파악할수 잇는 Slug를 쓰자.

• MetaData : 각 페이지에서 정확하고 완성된 meta data를 작성한다.

  • open graph : https://ogp.me/

• Image 최적화

• sitemap

  • static

  • dynamic

• Robots.txt 파일 작성

• frontend 성능 (web vitals)

• Mobile Friendly

• favicon

• local font

• open graph image

• google search console

• google analytics

• nextjs 14

URL

slug를 사용하여 사용자가 이해하기 쉽게 작성한다.

예를들면 다음과 같다.

• 'https://www.thisisgame.com/webzine/news/nboard/263/?category=1&n=189072' (no good)

• 'https://www.thisisgame.com/플레이엑스포에 가야 할 이유/' (good)

MetaData

각 페이지에서 정확하고 완성된 meta data를 작성한다.

open graph : https://ogp.me/

페이스북이나 트위터에서 링크를 공유할때 보여지는 정보를 설정할 수 있다.

alt text

• og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

• og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.

• og:image - An image URL which should represent your object within the graph.

• og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

• opengraph debugger : https://en.rakko.tools/tools/9/

• twitter card validator : https://cards-dev.twitter.com/validator

• facebook debugger : https://developers.facebook.com/tools/debug/

• linkedin post inspector : https://www.linkedin.com/post-inspector/

• pininterest validator : https://developers.pinterest.com/tools/url-debugger/

• socialsharepreview : https://socialsharepreview.com/

opengraph를 쓰면되지 왜 또 twitter는 또 따로 만들엇는가..

https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup

같은것이 많으므로 같은건 og를 쓰고 나머지만 트위터 카드를 쓰자.

sitemap

Robots.txt 파일 작성

frontend 성능 (web vitals)

Mobile Friendly

Image 최적화

favicon

local font

open graph image

google search console

google analytics

수정이 불가능

not found

페이지가 없으면 not found를 보여주자. 빈 페이지를 보여주는것보다 좋다.

수정이 불가능한것들이 있다 이건 어쩔수 없다.

• 도메인

• 참고 도메인

• 페이지 조회수

• 클릭률

nextjs 14

• metadata작성시 디비 읽어오는 fetch를 사용한다. 본문에 fetch가 있어도 상관없다. nextjs가 두번 호출되면 한번만 호출하고 데이터를 공유한다.

• client component는 검색이 되지 않으므로 가능한한 적게 만든다.