Description 메타 태그란?
meta태그는 이름에서 유추할 수 있듯이 metadata(정보에 대한 정보)를 제공합니다. 즉, 해당 사이트에 대한 정보를 주는 역할을 합니다. 화면에는 따로 표시되는 것이 없지만, 검색 엔진이나 브라우저 등에 읽히기 때문에 검색 최적화를 위해서는 반드시 해 주는 것이 좋습니다.
이런 식으로, 사이트 검색 시 타이틀이나 소개 등에 원하는 문구가 노출되도록 설정 할 수 있습니다. SNS 등에서 사이트 링크를 공유할 때 보이는 썸네일 이미지도 지정 할 수 있어요.
어떻게 사용하나요?
메타태그는 name과 content가 쌍으로 사용되는 경우가 많습니다.
ex 1. 검색 엔진을 위한 KeyWord를 정의할 때
1 | |
ex 2. 웹 페이지에 대한 설명Description을 정의할 때
1 | |
ex 3. 반응형 홈페이지를 위한 뷰포트viewport를 설정할 때
1 | |
어떤 종류가 있나요?
<meta charset="UTF-8">
HTML5의 인코딩 지정 방법. 보통 UTF-8을 기본으로 사용합니다.<meta name="description" content="이 페이지에 대한 설명">
이 사이트, 또는 이 페이지에 대한 설명. 검색 결과에서 사이트 이름과 함께 노출되니 내 사이트에 대한 간략한 소개를 적어둡니다.<meta name="keywords" content="페이지, 관련, 키워드">
이 사이트와 관련이 있는 키워드들을 적어두면 검색 엔진의 검색 결과에 반영됩니다.<meta name="author" content="작성자의 이름">
이 사이트, 페이지의 소유자를 기록하는 메타 태그.<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 작업 시 필요한 메타 태그. viewport란 화면에 보이는 영역을 말합니다.
위 코드는 ‘너비=보고 있는 기기의 넓이, 그에 맞춰 초기화면 배율을 1로 지정’ 한다는 뜻입니다.<meta http-equiv="refresh" content="30">
지정한 초 단위로 사이트를 새로고침 하는 메타 태그. 최근에는 잘 쓰이지 않습니다.<meta name="robots" content="noindex">
robots는 검색 엔진 크롤러의 허용, 불허 등을 제어합니다.
메타태그 보다는 robots.txt파일을 통한 검색 제어를 권장합니다.
—
OpenGraph란?
SNS 사용자가 증가하면서 웹사이트 url을 카카오톡이나 페이스북, 트위터 등으로 공유하는 일도 늘어났죠? 오픈그래프는 웹페이지가 소셜미디어 등으로 공유 될 때 사용하는 메타태그입니다.
이런 식으로 카카오톡, 페이스북, 트위터 등에서 링크를 공유하면 사진과 글귀가 포함되어서 나오도록 해 주는 메타태그입니다. (예시 이미지… 광고 아니에요 :scream: )
어떻게 사용하나요?
1 | |
og:는 카카오톡, 페이스북 등이 사용하고 있습니다. 소셜미디어 마다 규격이 조금씩 다르니 사이트 별 규칙을 확인하세요. 예를 들어서, 트위터의 경우 아래와 같이 사용합니다.
1 | |