출처
https://ogp.me/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
https://www.w3schools.com/tags/tag_meta.asp
왜 궁금했을까
스프린트 미션3을 진행하던 중...
오픈 그래프를 활용하여, 페이지 공유시 나타나는 스니펫 화면을 제어해볼 기회가 있었다.
다른 사용법은 없는지, 활용하면 어떤 이점이 발생하는지 궁금증이 생겨 더 공부해봤다.
개요
웹 개발이라는 환경은 끊임없이 변화한다. 이러한 격변 속에서 HTML의 복잡성을 이해하는 것은 웹개발자에게 무엇보다 중요할 수 있다. HTML의 복잡성을 정복하는 것은 인터넷상에서 콘텐츠의 가시성과 상호 작용에 큰 영향을 미칠 수 있기 때문이다.
그 중에서 HTML 메타 태그는 검색 엔진과 소셜 미디어 플랫폼에서 웹 페이지가 어떻게 인식되는지 관리하는 강력한 방법을 제공한다. 이 글에서는 메타 태그의 기본 기능과 콘텐츠의 공유성과 참여도를 높이는데 변화를 가져오는 Open Graph 태그의 기능을 자세히 설명하겠다.
메타 태그란
메타 태그는 웹 페이지의 내용을 설명하는 텍스트 조각으로, 페이지 자체에는 나타나지 않고 페이지 코드에서만 볼 수 있다. 이 태그들은 브라우저와 외부 서비스가 웹 페이지를 효율적으로 이해하고 처리하도록 돕기 때문에 중요하다. viewport나 charset과 같은 일부 메타 태그는 다양한 기기에서 웹 페이지가 어떻게 표시되는지에 영향을 주거나 텍스트 인코딩을 지정하는 반면, 다른 태그들은 검색 엔진 최적화와 소셜 미디어 상호 작용에 중요하다.
ex)
| 메타 태그 | 설명 |
|---|---|
<meta name="description" content="..."> | 페이지의 짧은 설명을 제공하며, 검색 결과의 스니펫에서 사용된다. |
<meta name="robots" content="..."> | 검색 엔진이 콘텐츠를 크롤링하고 색인화하는 방법을 제어한다. |
<meta name="googlebot" content="notranslate"> | 구글이 검색 결과에서 자동 번역을 제공하는 것을 방지한다. |
<meta name="google" content="nopagereadaloud"> | 구글의 텍스트 음성 변환 서비스가 페이지를 소리내어 읽는 것을 방지한다. |
<meta name="google-site-verification" content="..."> | 구글 검색 콘솔에서 사이트 소유권을 검증하기 위해 사용된다. |
<meta http-equiv="Content-Type" content="...; charset=..."> | 페이지의 MIME 타입과 문자 인코딩을 명시한다. |
<meta name="rating" content="adult"> | 성인용 콘텐츠로 표시하여 SafeSearch 결과에서 필터링하도록 신호를 보낸다. |
Open Graph
Open Graph 는 2010년 페이스북에 의해 만들어진 인터넷 프로토콜로, 웹 페이지를 소셜 그래프에서 풍부한 객체로 표현하는 방법을 표준화한다. 이 태그를 사용하면, 페이스북, 트위터, 링크드인 등의 플랫폼에서 페이지가 공유될 때 어떻게 타이틀, 설명, 이미지가 표시되는지 제어할 수 있다.
주요 Open Graph 태그
Open Graph를 효과적으로 활용하기 위해 HTML 문서의 <head> 부분에 다음 태그를 포함시키는 것이 중요하다:
og:title- 공유할 때 나타날 콘텐츠의 제목을 지정한다.
<meta property="og:title" content="HTML 메타 태그 마스터하기">og:description- 콘텐츠의 간단한 설명을 제공하며, 사용자가 무엇을 기대할 수 있는지 보여준다.
<meta
property="og:description"
content="사이트의 SEO와 소셜 미디어 존재감을 획기적으로 개선할 수 있는 HTML 메타 태그에 대해 알아보자..!"
>og:image- 웹페이지가 공유될 때 나타날 이미지의 URL을 정의한다.
<meta property="og:image" content="https://example.com/image.jpg">og:url- 페이지나 기사의 표준 URL을 반영한다.
<meta property="og:url" content="https://example.com/page.html">og:type- 공유되는 콘텐츠의 유형을 나타낸다(예: 기사, 비디오, 이미지).
<meta property="og:type" content="article">우리가 Open Graph 를 사용해야 하는 이유
개선된 가시성: 소셜 미디어에서 공유될 때 콘텐츠가 어떻게 보일지 제어하여 매력적이고 설득력 있는 모습을 보장한다.증가된 트래픽: 공유된 콘텐츠의 모습을 개선함으로써 클릭률을 높이고 웹사이트로의 트래픽을 증가시킬 수 있다.일관성: 다양한 소셜 미디어 플랫폼에서 콘텐츠가 일관되게 표현되도록 한다.맞춤 설정: 특정 이미지, 제목, 설명을 사용하여 소셜 미디어에서 콘텐츠의 표현을 맞춤 설정할 수 있다.참여 증가: 더 나은 표현은 사용자 참여를 증가시켜 더 높은 전환율과 소셜 미디어 플랫폼에서의 상호작용을 이끌어낼 수 있다.
Open Graph 태그를 구현하는 것은 소셜 미디어에서 콘텐츠의 발견성과 표현을 크게 향상시키는데, 이는 소셜 미디어에서 콘텐츠를 전략적으로 마케팅할 수 있게 한다. 또한, 사용자 상호작용을 최적화하는 의미도 있다.
결론
HTML 메타 태그는 웹 개발의 작은 부분이지만 온라인 성능에 미치는 영향은 매우 크다.
Open Graph 태그를 HTML 문서에 통합함으로써 검색 엔진과 소셜 미디어에서 최적의 성능을 보장할 수 있으며, 이 태그를 효과적으로 사용하면 콘텐츠가 돋보이게 하고 참여를 장려하며 소셜 미디어 존재감을 강화할 수 있다.
