고정 헤더 영역
상세 컨텐츠
본문
메타태그란 무엇일까?
메타태그는 문서의 정보를 담고 있는 태그이다. 즉, 실제 웹페이지를 설계하고 구축할때 필수적으로 들어가야 되는 문서의 정보다.
그렇기에 메타태그만 잘 설정해놔도 seo(검색엔진최적화)에 도움이 된다.
그 중에서 난 오늘 오픈그래프(open graph, 즉, og)를 기준으로 포스팅을 작성할 예정이다.
솔직히 이 오픈그래프만 잘 설정해놔도 메타태그 설정 다른 건 안해도 될 정도다.(물론 하면 좋다.)
지난 번 포스팅에서 간단하게 설명했던 것이 바로 오픈그래프다.
https://marketerbong.tistory.com/54
웹페이지 크롤링 하는 방법 핵심 요약!(메타태그를 가져와보자)
우선 아래 포스팅을 먼저 읽고 오자.https://marketerbong.tistory.com/53 마케터라면 검색엔진최적화(SEO)를 하기 위해, 프로모션 페이지나 광고 랜딩 페이지 등에 메타 태그를 삽입할 것이다.그리고 사이
marketerbong.tistory.com
원래 오픈그래프는 페이스북에서 만든 프로토콜로, 페이스북을 공유할 때 게시물인 것처럼 보여주기 위함이었다.
이건 중요하진 않으니, 넘어가자.
우선 오픈그래프의 구조는 다음과 같다.
<meta property="속성 이름" content="속성 값">
속성 이름에 title, description, image, url 등의 정보가 들어가는 것이다.
다양한 property 속성 들을 알고 싶다면 아래 url을 참고하라.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
아래는 내가 자주 사용하는 것들만 나열한 것이다.
// 필수! 이것만은 빼먹지 말자
<meta property="og:title" content="봉드로이드">
<meta property="og:description" content="봉드로이드는 개인 레퍼런스를 모아놓은 웹사이트이다.">
<meta property="og:image" content="http://bongdroid.info/image.jpg">
// 선택필수! 빼먹어도 상관은 없으나, 그래도 가급적이면 넣자
<meta property="og:url" content="http://bongdroid.info"> // 링크할 주소
// 선택 - 써도 그만, 안써도 그만인데, 쓰는게 더 SEO가 잘될 것 같은 심리적 안정감이 느껴진다
<meta property="og:type" content="website"> // 웹페이지 유형(article, movie 등)
<meta property="og:locale" content="ko_KR"> //기본은 en-US, 한글로 바꿈
<meta property="og:site_name" content="봉드로이드"> //title은 해당 페이지 제목, site_name은 홈페이지명
<meta property="og:image:alt" content="이 페이지는 이러이러한 페이지 입니다"> // image의 대체 텍스트솔직히 image:alt 만 제외하고, 나머지는 그냥 바뀌는 부분이 거의 없기에 복붙하듯 넣는다.
title과 description 부분만 페이지마다 다르게 설정하는 것이다.
참고로 메타태그는 <head>영역에 넣으면 된다.
'1. SEO(검색엔진최적화)' 카테고리의 다른 글
| 페이지 색인을 위한 필수조건, 표준 URL을 아시나요? (8) | 2024.11.14 |
|---|---|
| SEO(검색엔진최적화)의 기본, robot, sitemap! (0) | 2024.10.14 |
| SEO(검색엔진최적화)의 시작, 사이트 소유 인증! (6) | 2024.10.14 |
