검색엔진최적화(SEO)를 위한 메타태그?
메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다. 이러한 웹페이지의 메타 정보는 주로 HTML의 요소를 통해 마크업을 하며, HTML 문서 내에서 요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다. 반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다.
- SEO 태그 - title
<title>태그의 내용 보통 해당 HTML 문서의 최상위 헤딩(heading), 즉<h1>태그의 내용과 일치시키는 경우가 많으며, 웹사이트의 이름도 포함시키기도 합니다. - SEO 태그 - meta
웹사이트이 제목만 예외적으로<title>요소를 사용하고, 그 밖에 다른 웹페이지의 메타 정보는<meta>요소를 사용하여 표현합니다.
<meta> 요소를 사용할 때는 name 속성을 통해 메타 정보의 이름을 명시하고 content 속성을 통해 메타 정보의 이름과 내용을 명시합니다.
<meta name="description" name="keywords" content="HTML" />Open Graph 태그
요즘에는 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 좀 더 넓은 분야에서 활용되고 있습니다.
대표적인 사례로 페이스북이나 카카오톡, 슬랙(Slack)과 같은 앱에서 웹페이지의 링크만 입력하더라도 해당 웹페이지의 콘텐츠의 미리보기를 카드 형태로 나타나는 것을 들 수 있습니다. (e.g 카카오톡 링크의 웹페이지 미리보기)
Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 콘텐츠 미리보기를 지원하고 있습니다.
<!-- 웹사이트의 이름을 나타내는 og:site_name: -->
<meta name="og:site_name" content="블로그" />
<!-- 웹페이지의 제목을 나타내는 og:title: -->
<meta name="og:title" content="메타 태그를 통한 검색엔진 최적화" />
<!-- 웹페이지의 상세 설명을 나타내는 og:description: -->
<meta name="og:description" content="설명" />
<!-- 웹페이지의 유형을 나타내는 og:type: -->
<meta name="og:type" content="website" />
<!-- 웹페이지의 주소를 나타는 og:url: -->
<meta name="og:url" content="url주소" />
<!-- 웹페이지 썸네일(thumbnail) 이미지 주소를 나타내는 og:image (권장 크기: 1200 x 630): -->
<meta name="og:image" content="이미지주소" /> 🤔
SEO최적화를 위해 무엇을 해봤을까?
Next.js Header설정 외에 생각해보지 않았던 나...
웹 미리보기 설정 궁금했었는데 open graph 태그는 처음 알게 되었다👀!
daleseo님 설명: 메타 태그를 통한 검색엔진 최적화 (SEO)
The Open Graph protocol
