Slack에서 링크 미리보기 레벨 업
그러나 먼저 Open Graph 프로토콜에 대한 약간의 배경 지식입니다. 또는 skip straight to the code example .
오픈 그래프 프로토콜
The Open Graph (OG) protocol은 2010년 Facebook에서 웹 링크를 Facebook에 게시된 다른 콘텐츠와 기능 및 모양이 유사한 시각적으로 풍부한 콘텐츠 미리 보기로 변환하기 위해 만들어졌습니다.
Open Graph 메타 태그는 HTML 페이지의
<head>에서 웹 페이지에 대한 정보를 소셜 미디어 플랫폼 및 URL 메타데이터를 펼치는 기타 응용 프로그램(예: Slack)에 노출하는 데 사용됩니다. OG 메타 태그는 og 접두사가 붙은 속성으로 식별됩니다. 브라우저에서 이 페이지의 코드를 검사하여 HTML<head>에서 OG 메타 태그를 식별하고 조사하십시오!<meta property="og:image" content="https://example.com/image.png" />
Twitter에서 그래프 미리보기 열기
OG 메타 태그는 웹 페이지가 공유되는 플랫폼에 따라 웹 페이지의 모양을 사용자 지정하는 데 사용할 수도 있습니다. Twitter는 OG 프로토콜을 기반으로 구축된 자체 사용자 지정 구현을 출시했습니다. 이 코드 스니펫은 Twitter에 링크를 공유할 때 제목 및 설명과 함께 기본적으로 작은 이미지가 표시되는 대신 전체 폭이 큰 OG 이미지를 표시하도록 Twitter에 지시합니다.
<meta name="twitter:card" content="summary_large_image" />
큰 이미지 미리보기
기본 이미지 미리보기
Slack에서 그래프 미리보기 열기
기본적으로 Slack은 공유하는 링크의 HTML 페이지에 있는
og:title 및 og:description 메타 태그를 펼칩니다.
twitter.com(로그인하지 않은 상태)으로 이동하여 소스 코드를 검사하면 HTML
<head>에 다음과 같은 메타 태그가 표시됩니다. 흥미롭게도 Twitter는 홈 페이지에 Open Graph 미리보기 이미지에 대한 링크를 포함하지 않습니다!<!-- Open Graph title -->
<meta content="Twitter. It’s what’s happening" property="og:title">
<!-- Open Graph meta description -->
<meta content="From breaking news and entertainment to sports and politics, get the full story with all the live commentary." property="og:description">
og:image 메타 태그를 추가하면 Slack에서 링크를 펼칠 때 이미지가 표시됩니다.<meta property="og:image" content="https://example.com/image.png" />
그리고 레벨업 방법은 다음과 같습니다.
twitter:label와 twitter:data의 조합을 사용하여 Slack이 전개할 최대 2비트의 추가 컨텍스트 정보를 표시합니다. 흥미롭게도 이러한 OG 메타 태그에는 이름에 twitter가 포함되어 있지만 Twitter에서 공유되는 링크에는 데이터가 나타나지 않습니다.HTML
<head>에 아래 코드를 포함하면 해당 페이지에 대한 링크가 Slack에서 공유될 때 작성자 및 읽기 시간 정보가 표시됩니다. 선택한 정보에 대해 작성자와 읽기 시간을 전환할 수 있습니다. 예를 들어 페이지가 이벤트에 관한 것이라면 이벤트 날짜나 장소를 포함할 수 있습니다.<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Salma Alam-Naylor" />
<meta name="twitter:label2" content="Reading time" />
<meta name="twitter:data2" content="6 minutes" />
Slack에서는 다음과 같이 표시됩니다.
완전한 Open Graph 예제
여러 플랫폼에서 Open Graph 메타 태그에 대한 지원은 현재 일관성이 없습니다. 그러나 Open Graph specification 의 내 블로그 게시물 페이지에 가능한 한 풍부한 정보를 포함시켰습니다. 플랫폼이 향후 확장을 지원해야 합니다.
다음은 이 블로그 게시물에 포함된 모든 Open Graph 메타 태그의 전체 예입니다. Light and dark mode in just 14 lines of CSS .
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@whitep4nth3r" />
<meta name="twitter:creator" content="@whitep4nth3r" />
<!-- OG base data -->
<meta property="og:url" content="https://whitep4nth3r.com/blog/quick-light-dark-mode-css/" />
<meta property="og:title" content="Light and dark mode in just 14 lines of CSS" />
<meta property="og:description" content="Add quick support for light mode and dark mode to your website using only CSS by combining two CSS custom properties with a media query." />
<meta property="og:site_name" content="whitep4nth3r.com" />
<meta property="og:locale" content="en_GB" />
<!-- OG image data -->
<meta property="og:image" content="https://linktoimage.png" />
<meta property="og:image:alt" content="An image with dark background featuring a large panther on the left. The title — Light and dark mode in just 14 lines of CSS — is in white text at the centre, and below are icons representing the topics of the shared page." />
<meta property="og:image:width" content="1140" />
<meta property="og:image:height" content="600" />
<!-- extra metadata for Slack unfurls -->
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Salma Alam-Naylor" />
<meta name="twitter:label2" content="Reading time" />
<meta name="twitter:data2" content="3 minutes" />
<!-- extra metadata — unknown support -->
<meta property="og:type" content="article" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="CSS" />
<meta property="article:tag" content="Snippets" />
추가 자료
twitter:label 및 twitter:data 태그는 꽤 오랫동안 사용되었습니다! Slack이 링크 미리 보기를 펼치는 방법에 대해 자세히 알아보려면 2015년 Matt Haughy의 게시물Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack을 확인하십시오.
Reference
이 문제에 관하여(Slack에서 링크 미리보기 레벨 업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/whitep4nth3r/level-up-your-link-previews-in-slack-4c0f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
