Open Graph 미리보기

Open Graph 미리보기 도구는 공유 링크를 게시하기 전에 어떤 모습일지 보여줍니다. og:title,og: description,og: image,og:url 및 Twitter 카드 필드를 입력하거나 이미 가지고 있는 메타 태그 블록을 붙여넣으면 도구는 Facebook,X/Twitter,LinkedIn, Slack 및 Discord 용 대략적인 소셜 카드를 나란히 렌더링합니다. 페이지를 라이브로 푸시하고 공유하며 제목이 반으로 잘리거나 이미지가 로드되지 않는 것을 발견하는 대신 문제를 해결할 수 있는 동안 문제를 볼 수 있습니다.

Open Graph 프로토콜은 거의 모든 플랫폼이 그 카드를 만들기 위해 사용하는 공유 어휘입니다. 스크레이퍼가 페이지를 방문하여 <head>의 og: 메타 태그를 읽고,그로부터 미리보기를 조립합니다. 캐치는 각 플랫폼이 동일한 태그를 다르게 렌더링한다는 것입니다: X 는 대략 110 자에서 설명을 자르고 Facebook 은 155 에 가깝게 표시하고 LinkedIn 은 설명을 일부 표면에 완전히 숨기고 Slack 은 모든 것을 컴팩트 한 첨부 파일로 축소합니다. 한 카드에서 잘 보이는 필드가 다른 카드에서 망가질 수 있으므로 한 번에 모든 카드를 미리 보는 것이 유일하게 신뢰할 수있는 검사입니다.

여기에 실제 숫자와 함께 열린 그래프 미리보기입니다. og:title 을 "다시 쓰기없이 페이지로드 시간을 절반으로 줄이는 방법"(55 자,패스) 으로 설정하고 125 자 og: 설명. 유효성 검사는 제목을 전달하고 설명에 경고합니다: Facebook 및 LinkedIn 에 대해서는 괜찮지 만 X 는 약 110 을 자릅니다. X 대형 이미지 카드는 "4,1 초에서..."이후 텍스트를 자르고 Facebook 카드는 전체 문장을 보여줍니다. 열린 그래프 이미지 미리보기는 각 카드에 og: 이미지를로드하므로 깨진 링크는 누군가가 공유하기 전에 "이미지로드 실패"를 보여줍니다.

이 도구는 클라이언트 측에서 실행되며 페이지를 가져오거나 스크랩하지 않습니다. 양식에 입력하거나 원시 HTML 로 붙여넣고 로컬로 구문 분석하여 제공하는 태그에서 작동합니다. 즉,로그인 뒤에 있거나 스테이징 도메인에 있거나 전혀 배포되지 않은 페이지에 대한 메타데이터의 유효성을 검사할 수 있습니다. 서버에 요청하는 한 가지 요청은 og: image URL 을 로드하는 것이므로 브라우저가 카드에 그림을 표시할 수 있습니다.