우리가 책을 사면 처음에 제목을 가장 먼저 보게 되고 책 표지에 이미지를 보고 책의 내용을 대략 짐작하려고 합니다. 하지만 그것으로는 책의 정보를 알기엔 정보가 부족합니다. 2, 3장 넘기면 책에 대한 저자의 간략한 설명과 색인(Index)이 나옵니다. 제목과 간략한 설명 그리고 색인을 보면 대략 이 책에는 어떤 내용이 쓰여있는지 짐작이 가능합니다. 설명과 색인더 자세하면 자세할 수록 내용을 유추하기는 더 쉽습니다. 그래서 내가 꼭 읽고 싶었던 내용이라면 나는 그 책을 구매하게 됩니다.
이런 일을 돕는 게 웹 사이트에도 있습니다. 메타 태그(Meta tag)라는 것인데요, 사이트의 각 페이지마다 어떤 정보가 쓰여있고 어떤 키워드로 구성 돼 있는지 간단하게 정리하는 역할을 합니다.
앞으로 계속 반복해서 설명하게 될테지만 우리 흔히 사용하는 홈페이지, 웹사이트라고 하는 건 개념상 모든 페이지는 하나의 문서로 다뤄집니다. 내부적으로 복잡하게 코딩해서 만들어지지만 결과적으로 브라우저로 볼 수 있는 페이지는 한 번에 한 페이지입니다. 그 한 페이지는 각각 독립 된 문서(Document)로 객체입니다. 따라서 메타 태그도 극 독립 된 문서에 개별적으로 적용됩니다. 개념상 어려운 부분이지만 나중에 계속 추가 설명 하도록 하겠습니다.
사용법은 다음과 같습니다.
<meta name="og:title" content="페이지 이름">
<meta property="og:type" content="website">
<meta name="keywords" conent="페이지 내용을 대표하는 키워드들. 각 키워드는 |로 구분">
<meta property="og:description" content="페이지의 내용을 간략하게 설명">
<meta property="og:image" content="대표 이미지 절대경로">
<meta property="og:url" content="페이지 URL">메타 태그를 <head>...</head> 사이에 위치하게 된다.
title : 페이지의 이름. 웹서핑을 하다보면 브라우저 상단에 페이지 탭을 보면 홈페이지 이름이 계속 바뀌는 걸 볼 수 있다. 예를 들면 게시판을 보고 있을 때 게시판 제목이 페이지 제목 탭에 들어가 있다. 이런 페이지 제목을 넣는 부분이다.
keywords : 페이지를 대표하는 키워드들을 나열한다. 예를 들어 "최신 스마트폰 | 갤럭시 | 아이폰 | 요금할인"
description : 페이지 내용을 알 수 있는 간략한 설명이 들어간다. 예를 들어 "최신 스마트폰 모든 기기 요금 할인 이벤트를 진행합니다."
image : 페이지를 대표하는 이미지의 절대경로를 입력합니다. SNS에 문서를 공유 할 경우 여기 주소의 이미지가 보여지게 됩니다. 만약 블로그나 쇼핑몰처럼 이미지가 계속 바뀌는 사이트에서는 이 태그에 상품 이미지 주소가 계속 바뀌지만 sns 공유 툴에서 기본으로 설정하기 때문에 image 태그는 블로그에서는 생략하는 경우가 많습니다.
keywords와 description은 모든 페이지에 맞게 내용을 달리하면 좋지만 기술적으로 어려움이 있고 독립 서버로 운영되는 블로그가 아니면 사용자가 설정하기 어려운 부분이 있습니다. 그래서 보통은 사이트 특성을 잘 나타내는 내용으로 고정해서 작성합니다.
type, keywords, description은 꼭 들어가야 하는 항목입니다. 그러나 티스토리는 최근 이 메타 태그를 사용자가 작성하지 않아도 자동으로 생성해 줍니다.
'기타등등 > SNS & 블로그' 카테고리의 다른 글
| 애드센스 바뀐 규정, 새 블로그와 사이트에 광고가 보이지 않을 때 대처방법 (0) | 2020.11.13 |
|---|---|
| 티스토리 하루에 등록 가능한 포스팅 수는 30개로 제한한다? 확실히 알려드립니다. (0) | 2020.11.13 |
| 페이스북 새 버전에서 내가 언팔로우 한 친구 한번에 관리하기. 뉴스피드 기본설정 (0) | 2020.09.11 |