검색엔진 최적화(SEO)
내 페이지가 구글, 네이버 같은 검색 엔진에서 검색이 잘 되도록 하는 것
검색이 잘 된다 ? 내 페이지에 있는 특정 키워드로 검색했을 때, 검색 결과 페이지 상단에 노출되는 것
검색결과 상단에 노출하는 방법
광고
- 장점: 검색결과 최상단에 컨텐츠를 노출할 수 있음
- 단점: 광고비가 지속적으로 든다는 점 (세상엔 공짜가 없다..😢)
SEO
- 장점: 광고비가 들지 않는다
- 단점: 노출 순위를 올리기 위한 공수가 크다
프론트에서 시도할 수 있는 것들
사용자가 웹 사이트를 보겠지만,
사용자에게 웹 사이트를 제공하는 과정은 기계가 담당 !
기계가 웹 사이트를 잘 읽을 수 있도록 하는 과정이라고 생각하면 됨
*기계: 검색엔진, 브라우저 등
메타 데이터 작성하기 (SEO태그 활용)
- 메타데이터
- HTML 파일(데이터)을 설명하는 데이터
- 웹 페이지가 담고있는 컨텐츠가 아니라, 웹페이지 자체의 정보
- head 태그 안에 위치하기때문에, 사용자가 보는 페이지에 영향을 미치지 않음
- 검색엔진 같은 기계가 읽고 해당 웹 페이지를 파악
- SEO 태그 | 자세한정보
- 검색엔진 최적화를 위해 사용되는 메타태그를 소위 SEO 태그라고 통칭함
<title>- index.html파일의 타이틀을 표현함
- 페이지마다 고유한 title 태그를 작성함
- next 기준) 페이지마다 head의 title을 바꾸는 방법
import Head from 'next/head' function IndexPage() { return ( <div> <Head> <title>My page title</title> </Head> <p>Hello world!</p> </div> ) } export default IndexPage
<meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications.">
<meta>- name - content 속성: key-value으로 정보제공
- robots
- 크롤러의 동작을 지정함(콤마로 동작 구분) → 어떤 동작인지는 이 페이지 참고
- og(open graph) | 공식문서
- 링크 미리보기에 보여줄 정보(미리보기)
트위터는 자체적으로 관리하기때문에, og말고 twitter:image 처럼 작성해야함
→ 자세한 건 여기 참고
중요한 점
- 검색 엔진마다 최적화 방식이 다름
- 어떤 검색엔진에서 최적화하고 싶은지 정해지면, 해당 검색엔진 최적화 가이드라인 읽기
Google
SEO 체크해보기
keyword free SEO checker 키워드로 검색해서 무료로 SEO 체크하는 사이트 이용해보면 좋을 거 같습니다
