메타 태그를 사용하여 소셜 미디어에서 웹 사이트를 미리 보는 방법

6215 단어 htmltwitterwebdev
웹사이트는 Facebook, Twitter, Whatsapp 또는 Discord 커뮤니티와 같은 소셜 미디어에서 쉽게 공유되어야 합니다.

시선을 사로잡으려면 시각적으로 매력적인 방식으로 링크를 표시하는 것이 중요합니다. 추천 이미지, 설득력 있는 제목 및 간결한 설명이 있습니다. 그것은 사람들의 참여를 이끌 것입니다!

이 자습서에서는 Twitter에서 카드를 공유하기 위해 Open Graph와 함께 HTML 헤드의 메타 태그를 사용합니다. ✉️

Facebook 및 Twitter에서 공유하기 위한 상용구 HTML 메타 태그



간단히 말해: 이러한 상용구 HTML 메타 태그를 문서에 추가하면<head> Facebook 또는 Twitter에서 공유된 이 페이지의 URL이 참여 카드로 표시되어 콘텐츠가 트윗이나 게시물에서 이미 눈에 띄게 됩니다.

<!-- Boilerplate for HTML meta tags to preview on Facebook, Twitter -->
<!DOCTYPE html>
<html lang="en">
  <head prefix="og: https://ogp.me/ns#">
    <!-- ... other tags like title, link, charset, viewport -->
    <meta property="og:title" content="Example - Title of my Site" />
    <meta
      property="og:description"
      content="Example - Description of my Site"
    />
    <meta
      property="og:image"
      content="https://example.com/example-featured-image.jpg"
    />
    <meta name="twitter:site" content="@username-example" />
    <meta
      name="twitter:card"
      content="summary || summary_large_image || player || app"
    />
    <meta name="twitter:creator" content="@username-example" />
  </head>
  <body>
    <!-- Content you want to share -->
  </body>
</html>


예제를 원본 콘텐츠와 보내려는 메시지로 바꾸십시오!

Attention: Make sure to include prefix="og: https://ogp.me/ns#" in the opening <head> tag. Otherwise the provided Open Graph meta tags won't work.



다음은 Twitter의 다양한 카드 유형에 대한 개요입니다.


  • summary - 제목, 설명 및 썸네일 이미지가 포함된 요약 카드를 표시합니다.
  • summary_large_image - 크고 눈에 띄는 이미지가 포함된 요약 카드를 표시합니다
    • .
  • player - 비디오/오디오 또는 기타 미디어를 직접 스트리밍할 수 있는 카드를 표시합니다
    • .
  • app - App Store 또는 Google Play에서 모바일 앱 다운로드에 대한 직접 링크가 있는 카드를 표시합니다
    • .

    The Image should be square and at least 120x120px, but less than 1MB size



    예: chrisko.io의 요약 카드



    그림 1: 소셜 미디어 요약 카드


    다음은 chrisko.io에서 미리 본 요약 카드입니다. 이 도구를 사용하여 게시하기 전에 내 페이지의 소셜 미디어 카드를 테스트합니다.

    Facebook은 유사한 도구를 제공합니다. The Sharing Debugger

    소셜 미디어 카드의 메타 태그를 미리 보고 디버깅하기 위한 두 가지 크롬 확장 프로그램이 있습니다.
  • Social Share Preview
  • Open Graph Preview

    • These extensions even let you preview a card on your localhost ❤️



  • heymeta.com은 각 단일 메타 태그에 대한 심층 피드백을 제공하고 디버깅을 제공하는 소셜 카드 프리뷰어입니다!

    • React, Next 또는 Nuxt로 개발 중이신가요?



    소셜 미디어 카드에 대한 정보를 웹 사이트 URL에 제공하기 위해 HTML에 어떤 메타 태그가 있어야 하는지에 대해 논의했습니다. 그러나 React, Vue, Next, Nuxt 등과 같은 프레임워크를 사용하여 개발할 때 이러한 메타 태그를 추가하는 방법은 무엇입니까(..알아요, React는 여전히 라이브러리입니다..) 😉

    다음은 몇 가지 인기 있는 프레임워크에 대해 권장하는 것입니다.

  • Next.js: NPM 패키지next-seo는 폭발적입니다! OpenGraph, Twitter 태그 및 JSON-LD(구조화된 데이터 형식)를 추가할 수 있습니다 👍

  • Nuxt.js: 메타 태그 및 SEO는 Nuxt.js의 기본 기능입니다. 자세한 내용은 해당 항목documentation을 확인하세요!

  • React.js: create-react-app.dev - React-Helmet에 있는 React의 메타 태그에 대한 풍부한 소개는 React 앱에서 <head>를 동적으로 관리하기 위한 이동 패키지입니다.

    • 결론



    이 자습서에서는 Twitter 또는 Facebook에서 공유된 URL을 미리 보는 데 사용되는 것과 같은 소셜 미디어 카드에 대한 상용구 HTML 메타 태그를 생성합니다.

    chrisko.io의 요약 카드 예를 살펴보았습니다.

    가장 중요한 것은 웹사이트에 메타 태그를 추가하는 프로세스를 개선하여 소셜 미디어에서 공유할 때 멋지게 보이도록 하는 도구를 수집했다는 것입니다! 🚀

    추가 리소스



  • Open Graph Documentation
    • build(deps dev):bump@typescript eslint/eslint 플러그인 5.4.0에서 5.5.0으로 업그레이드
    Ruby on Rails 설치 방법(Mac, Window)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage