[FE로드맵] SEO

SEO(Search Engine Optimization)

• 검색엔진 최적화. 말 그대로 검색엔진이 해당 페이지를 잘 이해하고 분류할 수 있도록 하는 것
• 최적화가 잘 되어있을수록 검색엔진과 사용자가 검색하기 쉬워지므로 외부 유입이 쉬워짐
• 검색 엔진마다 크롤링 방식이나 성능에 차이가 있으므로 타겟 엔진의 가이드를 따라야 할 수도 있음

공통

• robots.txt: 필요한 경우 noindex, nofollow 등의 속성을 적절히 사용할 것
  • <meta name="robots" content="noindex, nofollow" />도 같음
  • nofollow는 개별 링크에 <a rel="nofollow">로 활용할 수도 있음
• <title>: 페이지마다 고유한 제목을 사용할 것
• <meta name="description" content="">: 페이지마다 고유하고 상세한 설명을 넣을 것
• <link rel="canonical" href="">: http/https, www 유무가 달라도 같은 페이지에 접속할 수 있는데, 가장 기준이 되는 주소를 지정할 수 있음.
  혹은 301 Redirection을 설정할 것.
• <h1>~<h6>: 필요한 부분에만 사용할 것
  • <h1>: 페이지 전체 제목
  • <h2>: topic 제목
  • <h3>: topic 내 제목들. 밑으로 <h4>~<h6> 사용
  • 제목이 아닌 곳을 강조하고 싶다면 <em>이나 <strong> 등을 활용할 것
• <a href="">: 크롤러가 일반적으로 <a> 태그의 href 속성만을 링크로 인식하기 때문에 <a> 같은 링크를 만들지 말 것
• <img alt="">: 이미지를 불러올 수 없을 때에나, 스크린 리더 사용자에게 유용한 속성이지만 크롤러에게도 정보를 제공할 수 있음

SEO는 아니지만 사용자에게 유용한 것

• favicon
• open graph: 링크를 공유할 때 썸네일과 함께 제공되는 정보.
  <meta property="og:title" content="브리셀 벨로그" /> 등의 형태로 제공.
  • Twitter의 경우에는 <meta name="twitter:card" />를 활용 (관련 링크)
    og 단독으로는 작동하지 않는 것인지는 불확실.

참고한곳

• SEO 기본 가이드 @ Google
• 웹마스터 가이드 @ 네이버
• [HTML] Open graph (오픈 그래피, og 태그) @ Tistory/명월 일지
• Twitter Card on Google Blogger(블로거에 트위터 카드 적용하기)
  @ Hahwul