[Frontend] SEO 최적화를 위한 Meta tag

안녕하세요.

오늘은 SEO 작업 중 필수적인 Meta tag에 대한 정보를 알아보겠습니다.

 

먼저 SEO(Search Engine Optimization) 작업은 기본적으로 검색엔진에서 로봇이 잘 ‘탐색’하고 ‘저장’해서 ‘노출’할 수 있도록 하는 것으로, 자신의 서비스가 페이지 상단에 노출하고자 한다면, 필수적으로 해야하는 작업입니다.

 

제목에서 말한 "Meta tag"만 하면 뚝딱 상위권에 올라온다면, 정말 행복하겠지만(ㅠㅠ)

실제로는 Meta tag 이외에 여러 작업 혹은 마케팅 기술들이 들어갑니다. 

Meta tag는 기초 중의 기초 작업!

 

보통 어떻게 SEO를 처리하는지 알아보고, Meta tag 중점으로 설명하겠습니다. 

 

 

1. SEO 하는  여러 방법 

1. 테크리컬 seo(접근성):

• 소비자가 이용하기 편리한 사이트맵 구성하여 이동이 쉬워야 함 (예시, 포워드SEO 사이트맵)
• 페이지마다 URL을 크롤링 되기 쉽도록 개선

2. On-page SEO

• 명확한 사이트 및 페이지 제목 작성 : 메타 태그, Open graph 태그
• 소비자가 원하는 양질의 가독성 좋은 글을 정보 제공
• 최신 콘텐츠 업데이트, 고품질 콘텐츠 제공
• UX/UI: 코어 웹 바이탈(속도, 로딩, 인터렉션, 비주얼적 안정성), 최대콘텐츠 출 페인트, 최초 입력 지원, 누적 레이아웃이동, 전면 광고 등
• Server Side 렌더링 구현을 통해 크롤러가 SEO에 필요한 데이터 추출 

3. Off-page SEO

• 백링크
• 사이트 평판, 신뢰도
• 브랜드와 도메인 파워
• 리뷰 파워(업데이트)

 

2. Meta tag & Open graph

1. Meta tag
meta tag를 작성시, 아래의 내용들에 유의하며 작성해야 한다. 

• 제목, 메타 설명문, 본문 계층 구조(Heading)의 키워드 설정 중요
• 메인 키워드와 서브 키워드 결정, 제목에는 메인 키워드 중점, 설명에는 메인 키워드 + 서브 키워드 적절하게 사용해야 함.
• 제목과 메타 설명문의 키워드가 본문 내용에도 있어야함.
• 키워드 설정 후 노출을 원하는 키워드를 적절하게 포함하여 자연스럽고 문맥에 맞는 완전한 문장을 작성

2. Open graph

• 웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기를 카드 형태로 나타남
• 웹페이지의 링크 공유 빈도수가 높아지며 메타 태그가 넒은 분야에서 활용되고 있음.

	기능
title	검색엔진이 검색 결과에 표시하는 페이지 제목임. 클릭을 결정할 때 중요 정보로 사용.
description	검색엔진 상세 설명
og:site_name	웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기 : 웹사이트의 이름
og:title	웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기 : 웹페이지의 제목
og: description	웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기 : 웹페이지의 상세 설명
og:url	웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기 : 웹페이지의 주소
og:image	웹페이지의 링크 입력 시 해당 웹페이지의 콘텐츠 미리보기 : 웹페이지 썸네일 이미지 주소

 

참고로 keywords 의 속성이 meta tag에 있지만, 구글 크롤러는 사용하지 않는다고 했습니다! 

그래서 요새는 빼는 추세! (관련 자료 https://creativestudio.kr/3142, https://www.semrush.com/blog/meta-keywords/)

메타 키워드(meta keywords)는 SEO에 의미가 없습니다.

 

 

감사합니다 : ) 

next.js에 meta tag 적용하기(실전편) -> 
✅ https://uni-s-code.tistory.com/50