사이트 소셜 미디어를 공유할 수 있도록 만드는 최소 메타 태그 5개

많은 개발자는 사람들이 Facebook, Twitter 또는 LinkedIn 등에 게시할 때 유용하다고 생각할 수 있는 블로그 게시물 또는 특수 콘텐츠 페이지와 같은 프로젝트의 페이지에 소셜 미디어 공유 버튼을 추가할 수 있습니다. 이러한 단추는 재미있고 종종 추가하는 것이 중요하지만 소셜 사이트에서 각 페이지에 대한 "카드"를 만드는 사이트 데이터를 로드하는 데 사용하는 필수 메타 태그를 포함하는 것이 중요합니다.

소셜 미디어 카드 예시

소셜 미디어 메타 태그

The goal of this blog post is to give you the 5 Minimum Meta Tags that must be used to allow your page to be shared across all social media platforms, while keeping your code as DRY as possible.

각 소셜 미디어 사이트는 특정 페이지 HTML 소스 코드 내에서 서로 다른(독점적인) 태그 세트<meta>를 찾습니다. 이미지, 제목, 설명 및 링크와 같은 적절한 카드 데이터를 채우기 위해 고유한 특정 필수 태그를 사용합니다. 각 소셜 미디어 플랫폼은 페이지를 공유할 때 원하는 모양에 따라 다양한 개별 태그를 가질 수 있지만, 이 블로그 게시물의 목표는 페이지를 공유하는 데 사용해야 하는 최소 메타 태그 5개를 제공하는 것입니다. 코드를 최대한 건조하게 유지하면서 모든 소셜 미디어 플랫폼에서 공유됩니다.

필요한 태그

소셜 미디어 플랫폼에서 공유할 때 표시되는 모양을 제어하려는 각 페이지에는 이 정보에 대해 최소한 다음과 같은 메타 태그가 필요합니다.

이미지( 이미지 태그에는 이미지에 대한 전체 URL이 포함되어야 합니다. )

제목

설명

링크( 링크 태그에는 페이지에 대한 전체 URL이 포함되어야 합니다. )

페이스북, 링크드인, 트위터

이 세 가지 소셜 미디어 플랫폼에서는 모두 Open Graphog: 메타 태그를 사용할 수 있습니다. 즉, 개발자가 각 태그를 한 번만 포함하면 모든 플랫폼에서 데이터를 채울 수 있습니다.

<meta property="og:title" content="Kyles Cool Blog Post Title">
<meta property="og:description" content="A blog post description that blows people away.">
<meta property="og:image" content="https://kyles-example-site.com/thumbnail.jpg">
<meta property="og:url" content="https://kyles-example-site.com/blog/example.html">

트위터 특정

Twitter는 Facebook과 Linkedin에서 사용하는 이미지 비율을 준수하기 위해 하나의 추가 태그를 사용해야 합니다(Twitter에서는 이 이미지의 크기가 1mb 미만이어야 함).

<meta name="twitter:card" content="summary_large_image">

추가 고려 사항(접근성)

다음 두 태그는 액세스 가능한 사용자 요구에 맞게 공유 소셜 카드를 준비하려는 경우 메타 데이터에 포함하는 데 유용할 수 있습니다.

<meta property="og:site_name" content="Kyles Cool Blog">
<meta name="twitter:image:alt" content="image alt text">

함께 모아서

다음 메타 태그는 개발자가 소셜 미디어에서 공유할 때 모양과 느낌을 제어하려는 사이트의 각 페이지에 사용해야 합니다. 이러한 통합 태그는 페이지를 모든 소셜 플랫폼에서 적절한 이미지, 제목 및 설명과 함께 공유할 수 있도록 하는 동시에 코드를 가능한 한 건식 상태로 유지할 수 있도록 합니다.

// Bare Minimum
<meta property="og:title" content="Kyles Cool Blog Post Title">
<meta property="og:description" content="A blog post description that blows people away.">
<meta property="og:image" content="https://kyles-example-site.com/thumbnail.jpg">
<meta property="og:url" content="https://kyles-example-site.com/blog/example.html">
<meta name="twitter:card" content="summary_large_image">

// Optional Additions for Consideration
<meta property="og:site_name" content="Kyles Cool Blog">
<meta name="twitter:image:alt" content="image alt text">

추가 리소스

Facebook Card Debugger

CSS-Tricks: The Essential Meta Tags for Social Media