개인 프로젝트용 오픈 그래프
오랫동안 나는 내가 공유할 일부 링크가 자동으로 멋진 형식의 이미지, 헤드라인 및 링크를 얻는지 궁금했습니다. 링크 공유 경험을 자동화하고 개선하기 위해 내 프로젝트에서 이와 같은 것을 구현할 수 있었습니까?
예!
이 기능은 The Open Graph protocol 을 사용하여 구현할 수 있습니다.
내 프로젝트 중 하나에서 어떻게 강화하는지 살펴보겠습니다.
오픈 그래프 구현
소개가 잘 말해줍니다. Open Graph 프로토콜을 설명하면 다음과 같습니다.
The Open Graph protocol enables any web page to become a rich object in a social graph.
참조하는 그래프는 웹 페이지에 기본 메타데이터 태그를 포함하여 생성되는 개체입니다.
귀하의 웹사이트에는
<meta charset="UTF-8"> 또는 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 와 같은 메타데이터 태그가 있을 수 있습니다.Open Graph 태그는 일부 추가된 동일한 자체 폐쇄
<meta /> 태그 구조를 사용합니다. 각 Open Graph 메타 태그에는 property 및 content 속성이 있습니다. property 속성은 content 속성의 값을 설명하거나 분류합니다.Open Graph가 작동하려면 각 웹 페이지에 4개의 필수 속성이 있습니다.
이러한 속성은 다음과 같습니다.
이러한 태그에 대한 자세한 설명은 설명서의 Basic Metadata 섹션에서 찾을 수 있습니다. 그러나 그들은 Twitter 및 Facebook 피드에서 볼 수 있는 풍부한 미디어 게시물의 핵심 요소를 구성합니다.
내 Halloweenti.me 프로젝트를 예로 사용하면 내 4개의 메타 태그는 다음과 같습니다.
<meta property="og:title" content="How Many Days Until Halloween?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://halloweenti.me/" />
<meta property="og:image" content="https://halloweenti.me/my-image.jpg" />
내 HTML 파일이 실시간으로 푸시되면 halloweenti.me에 대한 링크를 공유하면 내가 지정한 이미지와 함께 웹 사이트의 제목 및 URL이 자동으로 렌더링됩니다.
좋은 찾고
Open Graph를 추가하기 전에 Discord에서
https://halloweenti.me/ 링크를 공유하는 모습은 다음과 같았습니다.
The Open Graph 프로토콜이 없는 URL의 예내 말은, 이 사이트가 대단하다고 생각하지만 다른 사람의 관심을 끌지는 못할 것입니다.
이것이 지금의 모습입니다.
내가 지정한 이미지, 제목 및 설명을 포함하여 URL이 어떻게 생겼는지.우와! 보기가 더 쉽고 그냥 스크롤하는 사용자에게 더 많은 컨텍스트를 제공합니다. 4개의 필수 속성이 소셜 미디어 미리 보기에 어떻게 표시되는지 확인할 수도 있습니다.
결론
Open Graph Protocol에 대해 제가 좋아하는 점은 상대적으로 구현하기 쉽고 풍부한 콘텐츠 예제를 위해 추가할 수 있는 추가 메타 태그가 있다는 것입니다. 내 프로젝트에 대한 설명을 포함했지만 블로그 게시물이 기사인 것처럼 오래된 콘텐츠와 관련된 태그가 있습니다.
귀하의 프로젝트가 소셜 미디어에서 더 돋보일 수 있도록 Open Graph 프로토콜을 사용해 볼 것을 권장합니다.
자원
게시물 Open Graph for Personal Projects이 Shannon Crabill — Front End Software Engineer에 처음 나타났습니다.
Reference
이 문제에 관하여(개인 프로젝트용 오픈 그래프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/scrabill/open-graph-for-personal-projects-3pdb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
