SEO : 검색엔진 최적화, 검색 엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스
검색엔진 최적화 과정을 위해 알아야 할 몇가지 키워드가 있다.
- 크롤링 : 검색포털 내에서 웹페이지를(온라인에 있는 문서) 수집하는 과정으로 쉽게 말해 신규 또는 업데이트된 웹페이지를 찾는 과정.
- 색인 : 수집한 내용을 백과 사전 형태로 등록하는 과정으로 웹페이지의 텍스트, 이미지, 동영상 파일을 분석하고 각 검색 포털의 데이터베이스에 이 정보를 저장한다. 이때 정재되지 않고 등록된 웹문서는 검색엔진에서 의미있는 키워드를 가져오기 힘들다.
- 색인 생성 : 페이지가 크롤링되면 색인 과정으로 페이지의 내용을 파악 단계.
<title>요소 및 alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업 - 메타태그 : 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하는 태그. 검색엔진은 메타태그에 있는 내용을 바탕으로 색인 작업을 진행한다.
메타 태그 종류를 몇가지 보자면,
// 검색 엔진에 의해 검색되는 단어 지정
<meta name="Keywords" content="Web, html, 웹 표준" />
// 검색 결과에 표시되는 문자를 지정
<meta name="Description" content="강원도 산불 방지를 위해 후원해주세요" />
// 검색 로봇 제어
<meta name="Robots" content="noindex, nofollow" />
//index : 페이지 정보 수집 여부
//follow : 페이지와 링크가 걸린 곳 포함해 수집 여부검색포털에 정재된 정보를 보여지게 하기 위해 메타 태그가 그 작업을 담당하고,
메타태그 속 옵션에 들어간 내용을 바탕으로 검색 포털에서 보여질 내용이 구현되고 SNS로 공유되어 미리 보여질 컨텐츠는 <og:title > 속성에 있는 내용을 바탕으로 구현된다.
//og 태그를 활용한 코드 구현
<Head>
<meta property="og:title" content={props.data.title} />
<meta property="og:description" content={props.data.contents} />
<meta property="og:image" content={
props.data.images.length
? `https://storage.googleapis.com/${props.data.images[0]}`
: "https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E" }
/>
</Head>SNS로 공유되어 보여지는 이미지
검색 포털마다 검색엔진이 더 쉽게 사이트의 콘텐츠를 크롤링하고 색인 작업을 위한 가이드를 제공한다. 구글 검색엔진 가이드
FE 개발자 성장 기록 👩🏻💻