깨진 링크 미리보기를 발견하는 최악의 시간은 시작 트윗 후입니다. 당신은 페이지에 일주일을 보내고,공지를 작성하고,당신은 보내기를 누르십시오 - 그리고 나타나는 카드는 잘린 제목과 이미지가없는 회색 직사각형이기 때문에 og:image 가리키는 /images/og.png 대신 https://yoursite.com/images/og.png. 게시물이 이미 나왔습니다. 카드가 이미 캐시되었습니다. 수정 한 다음 모든 사람에게 다시 공유하도록 요청하게됩니다.
안 그래프 열기 미리보기는 수표를 더 일찍 움직여서 해결합니다. 게시하고 바라는 대신 태그가 여전히 편집 가능한 동안 카드가 어떻게 될지 살펴봅니다. 이것이 전체 전제입니다 그래프 미리보기 열기 도구: 태그를 입력하거나 이미 가지고 있는 태그를 붙여넣고 모든 필드에 대한 통과/경고/실패 판결과 함께 나란히 렌더링된 대략적인 Facebook, X, LinkedIn, Slack 및 Discord 카드를 확인하세요.
하나의 미리보기로 충분하지 않은 이유는 모든 플랫폼이 동일한 태그를 읽고 다르게 렌더링하기 때문입니다. X 는 대략 110 자로 설명을 자르고; Facebook 은 155 에 더 가깝게 보여줍니다. LinkedIn 은 자주 설명을 완전히 삭제하고 이미지,제목 및 도메인 만 표시합니다. Slack 은 컬러 레일이있는 컴팩트 한 첨부 파일로 전체를 축소합니다. Discord 는 설명을 눈에 띄게 포함하지만 이미지를 축소합니다. Facebook 카드에 아름답게 맞는 제목은 X 의 단어 중간에 잘라낼 수 있으며 둘 다 보지 않으면 결코 눈치 채지 못할 것입니다.
나는 짓는다 Toolz.dev 그리고 페이지를 끊임없이 발송하고 게시-확인-수정 루프에 지쳤습니다. 이 도구는 브라우저에서 완전히 실행되며 네트워크 호출을 전혀 하지 않습니다. URL 을 가져오지 않습니다. 즉,아직 배포되지 않은 페이지에서도 작동하거나 로그인 뒤에 앉아 있거나 공식 플랫폼 디버거가 도달할 수 없는 스테이징 도메인에 살고 있습니다.
TL;DR: 열린 그래프 태그는 링크가 공유될 때 어떻게 보이는지를 제어합니다. 모든 플랫폼은 동일하게 읽습니다
og:태그는 있지만 잘라내어 다르게 배치하므로 한 플랫폼을 미리 보면 다른 플랫폼에 대해 아무 것도 알 수 없습니다. The 그래프 미리보기 열기 도구는 한 세트의 태그에서 5 개의 플랫폼 카드를 렌더링하고, 현재 플랫폼 제한에 대해 각 필드를 검증하고, 이미 가지고있는 경우 기존 태그 블록을 구문 분석하고 복사 준비가 된 카드를 건네줍니다<meta>블록 - 스크래핑이나 업로드가 없는 모든 클라이언트 측.
주요 특징
한 세트의 태그에서 다섯 개의 플랫폼 미리보기
이 도구는 두 가지 모두에서 Facebook, X에 대한 대략적인 카드를 렌더링합니다 summary_large_image 그리고 summary 스타일,링크드인, 슬랙,디스코드. 모두 같은 필드에서 읽으므로 타이틀을 다듬으면 모든 곳에서 한 번에 업데이트되는 것을 볼 수 있습니다. 포인트는 픽셀 완벽한 충실도가 아니라 - 플랫폼은 경고없이 카드를 다시 디자인합니다 - 그러나 상대적인 충실도: 정확한 비율,정확한 잘림 포인트,정확한 필드 순서를 통해 어느 플랫폼이 깨지는지 확인할 수 있습니다.
이미 가지고 있는 태그에 대해 붙여넣기 및 구문 분석합니다
페이지가 존재한다면,아홉 개의 필드를 다시 입력하고 싶은 경우는 거의 없습니다. 원시 HTML 붙여넣기 - 전체 <head>, 뷰 소스 덤프 또는 느슨한 블록 <meta> 선 - 구문 분석 상자에 들어가면 내장 구문 분석기가 모든 것을 꺼냅니다 og: 그리고 twitter: 태그를 인식하여 양식에 로드합니다. 파서는 DOM 기반이 아닌 정규식 기반이므로 브라우저, 노드 및 데스크톱 빌드에서 변경 없이 동일한 코드를 실행할 수 있습니다.
실제 한계가 있는 현장별 검증
모든 필드는 패스,경고 또는 실패 상태를 얻습니다. 약 60 자 이상의 제목은 실패합니다. 110 과 155 자 사이의 설명은 Facebook 및 LinkedIn 에서 완전히 읽지 만 X 에서 잘리기 때문에 경고합니다. 친척 og:image 경로가 완전히 실패합니다 - 스크레이퍼가 해결하지 않습니다. An og:image 일반에서 제공됩니다 http 경고합니다,왜냐하면 몇몇 플랫폼이 HTTPS 가 아닌 이미지를 렌더링하는 것을 거부하기 때문입니다. A twitter:site 유효한 핸들이 아닌 값이 실패합니다. 평결은 일반 "looks fine"가 아니라 행동할 수 있을 만큼 구체적입니다.
실제로 따를 수 있는 이미지 규칙
모든 주요 플랫폼의 큰 이미지 카드는 1.91:1 이미지를 가정합니다; 1200x630 픽셀은 한 번에 모든 것을 만족시키는 크기입니다. 이 도구는 명시적으로 타겟팅하고 이미지를 자동으로 사라지게 만드는 실패 모드에 플래그를 지정하며 - 이미지가 깨진 카드는 가장 일반적인 단일 Open Graph 버그이기 때문에 - 실제 렌더링합니다 og:image 각 미리보기의 URL, 이미지를 로드할 수 없는 경우 명확한 자리 표시자로 다시 떨어집니다.
복사 준비가 완료된 올바르게 이스케이프된 메타 블록입니다
생성된 출력은 조각이 아닌 완전한 태그 블록입니다. 여기에는 다음이 포함됩니다 og:image:width 그리고 og:image:height대부분의 사람들이 깨닫는 것보다 더 중요한 것은: 그들없이, 일부 스크레이퍼는 첫 번째 가져 오기에 텍스트 전용 카드를 렌더링하고 다운로드하고 측정 한 후에 만 이미지를 보여 주며, 몇 시간 후에 값을 HTML로 이스케이프 처리하므로 설명의 앰퍼 샌드 또는 견적이 속성에서 벗어나 마크업을 손상시킬 수 없습니다.
100% 클라이언트 측, 긁힘 없음
이 도구는 URL 을 요청하지 않습니다. 이것은 고의적이며,이유를 이해할 가치가 있습니다: 브라우저는 동일한 출처 정책 때문에 임의의 타사 페이지를 가져올 수 없으며 서버 측 가져오기는 미공개 URL 을 somebody else's 로그에 제공하는 태그에서 작업하면 문제가 모두 회피되고 공식 디버거가 제공할 수 없는 경우의 잠금이 해제됩니다 - 아직 라이브가 아닌 페이지의 유효성을 검사합니다. 참조 온라인 도구의 데이터 개인 정보 보호 더 넓은 추론을 위해.
그래프 미리보기 열기 도구를 사용하는 방법
1 단계: 태그를 로드합니다
두 개의 경로가 있습니다. 메타데이터를 처음부터 작성하는 경우 다음 양식을 작성하십시오: og:title, og:description, og:image, og:url, og:site_name그런 다음 하나를 선택하세요 og:type 그리고 a twitter:card 스타일을 지정하고 추가하세요 twitter:site 그리고 twitter:creator 핸들.
페이지에 이미 태그가 있는 경우 대신 붙여넣으세요. 페이지를 열고 소스 보기(브라우저 검사기 아님 - 아래 구별에 대한 자세한 내용)를 복사하세요 <head>그리고,구문 분석 상자에 드롭합니다. 구문 분석 태그를 클릭하면 인식된 모든 것이 양식에 로드됩니다. 파서는 별칭도 이해합니다: og:image:secure_url 그리고 og:image:url 둘 다 이미지 필드에 피드를 제공합니다 twitter:title, twitter:description, 그리고 twitter:image 다음과 같은 경우 대체 수단으로 사용됩니다 og: 등가물이 없습니다. 이는 플랫폼 자체가 태그를 해결하는 방법을 반영합니다.
2 단계: 유효성 검사 패널 읽기
유효성 검사 목록은 필드가 중요한 방식으로 정렬됩니다. fails first: a missing 을 수정합니다 og:image는, 상대 이미지 경로, 제목 20 문자 한계를 넘어. 그런 다음 대부분 플랫폼 간의 격차에 대한 경고 봐 - 페이스 북에 대한 괜찮지만 X에 대한 긴 설명, 누락 og:site_name 즉, 카드에 브랜드 대신 기본 호스트 이름이 표시됩니다.
패널의 상단에 카운터는 빠른 읽기를 제공합니다. 제로 실패하고 경고의 몇은 완벽하게 shippable 상태입니다; 경고는 버그가 아닌 절충안입니다.
3 단계: 카드 비교
이것은 사람들이 건너 뛰는 단계이며,실제 문제를 포착하는 단계입니다. 6 개의 미리보기를 모두 스캔하십시오. X 요약 카드에서 제목이 잘렸습니까? 설명이 LinkedIn 에서 사라 졌습니까 (일반적으로 그렇습니다 - 예상 됨)? 이미지가 1,91:1 에서 바로 보이는가,아니면 사각형 그래픽을 디자인하고 카드가 넓게 렌더링하기 때문에 로고가 잘린 것입니까?
모든 카드가 깔끔하게 읽을 때까지 다듬고 다시 확인합니다. 유용한 분야: 가장 엄격한 제약 조건에 쓰십시오. 설명이 110 자로 완전히 읽히면 모든 곳에서 완전히 읽혀집니다. 제목이 55 자로 작동하면 모든 카드와 모든 모바일 레이아웃에서 살아남습니다.
4 단계: 메타 블록을 복사하여 발송합니다
생성된 블록을 page's 에 복사합니다 <head>. 프레임워크에서 - Next.js, Nuxt, SvelteKit, Astro - 원시 붙여넣기를 하지 않습니다 <meta> 태그, 그러나 블록은 여전히 framework's 메타데이터 API에서 정확히 어떤 필드를 채울지에 대한 진실의 소스입니다.
그런 다음 모두가 잊어 버린 단계를 수행: 각 platform's 디버거에서 URL 을 다시 긁어. 수정 사항을 배송하면 캐시 된 카드를 지울 수 없습니다. 그만큼 메타 태그 생성기 소셜 태그와 함께 사용되는 제목, 설명, 표준, 로봇 등 표준 SEO 태그도 필요한 경우 여기에 동반 도구가 있습니다.
Open Graph Protocol이 실제로 작동하는 방식
오픈 그래프는 소셜 그래프에서 웹 페이지를 노드로 바꾸는 방법으로 2010 년 페이스북에서 시작되었다. 야망은 사라졌다; 태그 어휘는 고착되었고,이제 페이스북,링크드인, 슬랙,디스코드, 왓츠앱,핀터레스트, 아이메시지,시그널, 그리고 대부분의 다른 링크 풀기 소프트웨어가 읽는 사실상의 표준이 되었다.
메커니즘은 간단합니다. 링크가 공유되면 플랫폼은 URL 에 봇을 보냅니다 - facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. 해당 봇은 원시 HTML을 요청하고 다음을 읽습니다 <head>, 추출합니다 og: 그리고 twitter: 메타 태그,그리고 카드를 구축. 그것은 하나의 HTTP GET 와 구문 분석입니다. 봇은 브라우저가 아닙니다: 이러한 크롤러의 대부분은 버그의 전체 장르의 근본 원인 인 자바 스크립트를 실행하지 않습니다.
태그 자체
프로토콜에서 요구하는 대로 4개의 태그가 설명됩니다: og:title, og:type, og:image, 그리고 og:url. 실제로 og:description 그리고 og:site_name 카드가 없으면 카드가 맨손이거나 스크레이퍼가 페이지에서 찾을 수 있는 텍스트로 돌아가기 때문에 똑같이 하중을 지탱합니다. 태그는 다음을 사용합니다 property 속성이 아닙니다 name- <meta property="og:title" content="..." />- 트위터 태그가 반대 역할을 하고 사용하기 때문에 사람들이 넘어집니다 name. 대부분의 파서는 이에 대해 관대하지만 platforms' 자체 검증자가 항상 그런 것은 아니므로 올바르게 수행할 가치가 있습니다.
og: 대 트위터: 우선순위
X 는 트위터 카드 태그를 먼저 읽고 부재시 다시 Open Graph 로 돌아갑니다. 즉,만 있는 페이지를 의미합니다 og:title, og:description, 그리고 og:image 여전히 작동하는 X 카드를 생산합니다. 대체는 설계에 따라 결정됩니다.
그래서 실제로 필요한 것은 a입니다 twitter: 꼬리표? 세 가지. twitter:card 레이아웃을 결정하며, 이에 상응하는 Open Graph는 없습니다: 레이아웃이 없으면 X는 찾은 내용에 따라 카드 스타일을 선택하며, 이는 위임하려는 결정이 아닙니다. twitter:site 카드를 브랜드 계정에 귀속시킵니다. twitter:creator 저자를 인정합니다. 그 외의 모든 것은 Open Graph 에서 안전하게 나올 수 있습니다.
실용적인 규칙: 완전한 Open Graph 태그를 작성한 다음 해당 세 개를 정확하게 추가합니다 twitter: 태그. 복제 twitter:title 그리고 twitter:description 다른 곳과 다른 X 복사본을 진정으로 원하지 않는 한 무해하지만 무의미합니다. 이는 때때로 합법적인 선택입니다. X's의 더 빡빡한 잘림은 때때로 더 짧고 강력한 설명을 정당화하기 때문입니다.
이미지 크기, 비율 및 자르기 문제
1.91:1 화면비는 내면화할 수 있는 숫자입니다. 1200x630 픽셀이 적중하고 망막 디스플레이에 충분히 크며 Facebook, LinkedIn 및 X가 모두 큰 이미지 카드에 대해 왜곡 없이 렌더링하는 것입니다.
실패 모드는 미묘하다: 플랫폼은 일반적으로 오프 비율 이미지를 거부하지 않습니다, 그들은 그것을 자릅니다. 사각형 1000x1000 그래픽을 업로드하고 페이스 북은 1.91:1 로 중앙 자르다, 이는 상단과 하단에서 대략 세 번째 슬라이스. 헤드 라인 텍스트가 수직 중심에 있었다면 그것은 살아남는다; 당신이 상단에 로고를 넣으면 그것은하지 않습니다. 다른 표면이 약간 다른 양으로 자르기 때문에, 안전한 영역 내부와 가장자리에서 멀리 의미있는 콘텐츠를 유지.
컴팩트 X summary 카드는 예외입니다. 최소 144x144 의 정사각형 이미지를 원하며 1,91:1 배너를 정사각형으로 중앙 자르면 - 보통 파괴됩니다. 고의로 사용하는 경우 summary, 정사각형 이미지를 제공합니다; 배너를 공급하면 사용하십시오 summary_large_image.
파일 크기를 약 5MB 미만으로 유지하고(Facebook's 문서화된 천장; 다른 플랫폼은 실제로 더 엄격함) PNG, JPEG 또는 역할을 합니다 웹P를,그리고 항상 절대 HTTPS URL 을 사용합니다. 상대 경로 및 프로토콜 상대 // URL은 이미지가 자동으로 나타나지 않는 가장 일반적인 두 가지 방법입니다.
스크레이퍼 캐시 이유 및 캐시 파기 방법
모든 플랫폼은 페이지를 스크랩한 결과를 캐시합니다 - 일반적으로 약 7 일 동안,때로는 더 오래 캐시합니다. 이것은 고집이 아닙니다: 인기있는 링크는 한 시간에 수천 번 공유 할 수 있으며 각 공유에 대해 페이지를 다시 가져 오는 것은 플랫폼에서 수행하는 서비스 거부 공격이 될 것입니다. 그래서 그들은 한 번 스크랩하고 재사용합니다.
결과는 태그를 수정해도 카드가 수정되지 않는다는 것입니다. 캐시가 만료될 때까지 기존 공유 및 새 공유에 대해 이전 미리 보기가 지속됩니다. 새로 고침을 강제하려면:
- 페이스북: 공유 디버거, "Scrape Again" 버튼을 사용합니다. 이것은 또한 Instagram 과 WhatsApp 에 의해 사용되는 캐시를 지웁니다.
- 링크드인: 포스트 조사관. URL 을 입력하면 신선한 긁힘이 발생합니다.
- 엑스: 카드 유효성 검사기가 더 이상 사용되지 않으며 액세스가 일관되지 않습니다. 실제로는 링크를 게시하는 것이 유일하게 신뢰할 수 있는 새로 고침입니다.
- 느슨함: unpurl 캐시는 자체적으로 만료됩니다; 무해한 쿼리 매개변수를 추가하면 즉시 새로운 unpurl이 생성됩니다.
- 불화: 유사 - 변경된 쿼리 문자열은 실용적인 해결 방법입니다.
그 쿼리 문자열 트릭은 범용 이스케이프 해치입니다: https://example.com/page?v=2 는 스크레이퍼에게 캐시된 항목이 없는 다른 URL입니다. 실제로 게시한 표준 링크가 아닌 테스트에 사용하고 보관하세요 og:url 매개변수화된 변형의 공유가 올바르게 통합되도록 깨끗한 표준 주소를 가리킵니다. The URL 인코더/디코더 해당 매개변수가 복잡해지면 편리합니다.
태그가 누락되면 어떻게 되나요
스크레이퍼는 뒤로 물러나고, 폴백은 당신이 바라는 것보다 더 나쁩니다.
아니요 og:title 그리고 그들은 다음을 사용합니다 <title> 태그 - 일반적으로 검색 결과를 위해 작성되며 종종 파이프와 브랜드 이름으로 끝나며 카드 헤드 라인으로 어색하게 읽습니다. 아니요 og:description 그리고 그들은 메타 설명을 사용하거나,또는 쿠키 배너나 네비게이션 라벨을 끌어올 수 있는 본문 텍스트를 긁어냅니다. 아니요 og:image 그리고 대부분의 플랫폼은 텍스트 전용 카드를 보여 주지만 일부는 페이지의 모든 이미지를 찾고 로고, 아바타 또는 추적 픽셀을 찾을 수 있습니다. 아니요 og:url 그리고 공유 주소는 그대로 사용됩니다 ?utm_source=twitter 변형은 별개의 페이지로 처리되며 공유 횟수는 조각입니다.
일반 디버깅에서는 보이지 않기 때문에 이름을 지정할 가치가 있는 실패 클래스가 하나 더 있습니다: 클라이언트 측 JavaScript에서 삽입한 태그입니다. 메타 태그가 React 에 의해 수화 후에 설정되면 브라우저 검사기가 완벽하게 보여주고 스크레이퍼는 아무것도 보지 못합니다. 왜냐하면 스크레이퍼는 자바 스크립트를 실행한 적이 없기 때문입니다. 항상 view-source 또는 curl앱이 부팅된 후 DOM이 아닌 서버가 실제로 반환한 원시 HTML을 표시합니다. 인증되지 않은 요청에 401, 로그인 리디렉션 또는 봇 차단 403을 반환하는 페이지에도 동일하게 적용됩니다: 스크레이퍼는 콘텐츠가 아닌 오류 페이지를 가져옵니다.
일반적인 사용 사례
사전 실행 검증
핵심 사례. 페이지가 실행되기 전에 발송하려는 태그를 붙여넣고 모든 카드 렌더링을 확인하세요. 공식 플랫폼 디버거가 할 수 없는 한 가지 일은 라이브 URL 을 가져와야 하기 때문입니다. 사전 실행 확인 비용은 30초이며 출시일 재공유가 절약됩니다.
깨진 카드 디버깅
링크가 잘못 펼쳐지고 왜 당신이 알아야합니다. page's 현재 태그를 붙여 유효성 검사 패널을 읽고,원인은 일반적으로 즉시: 상대 이미지 경로,an http 이미지, 한계의 두 배에 달하는 설명, 누락 twitter:card. 플랫폼 디버거에서 수정, 다시 스크랩이 완료되었습니다.
규모에 맞춰 사이트's 메타데이터를 감사합니다
사이트 페이지를 페이지별로 작업하여 각각 붙여넣습니다 <head> 그리고 평결을 읽으면 다중 기여자 프로젝트에 축적되는 표류가 표면화됩니다: 한 페이지에는 Twitter 태그가 있고 다른 페이지에는 그렇지 않습니다. 한 설명은 300자이고 세 페이지는 동일한 일반을 공유합니다 og:image. 도구는 페이지당 추측이 아닌 빠른 일관성 검사가 됩니다.
공유 이미지 디자인하기
를 선택하거나 시운전할 때 og:image미리보기는 크롭이 실제로 정사각형 카드와 비교하여 넓은 카드에서 어떤 역할을 하는지 보여줍니다. 디자이너는 일상적으로 1.91:1 크롭에 의해 도살되는 아름다운 정사각형 그래픽을 넘겨줍니다; 배송되기 전에 보는 것이 나중에 보는 것보다 저렴합니다.
가장 엄격한 제약 조건에 복사본을 작성합니다
미리 보기에는 Facebook's 옆에 X's 잘림이 표시되므로 추상 문자 제한을 보이는 것으로 바꿉니다. 110 자로 완전히 읽는 설명을 작성하는 것은 입력할 때 줄임표가 나타나는 것을 볼 수 있을 때 훨씬 쉽게 잡을 수 있는 분야입니다 슬러그 생성기 깨끗한 URL을 생성하는 인근 작업을 다룹니다 og:url 가리켜야 합니다.
준비 작업이나 로그인 뒤에서 작업합니다
내부 도구,NDA 아래의 클라이언트 작업 및 auth 벽 뒤의 페이지는 모두 플랫폼 디버거에서 연결할 수 없습니다. 도구는 가져오기가 아닌 태그에서 작동하기 때문에 공개 페이지와 동일하게 처리합니다.
플랫폼 비교
현재 가장 잘 알려진 지침. 플랫폼은 발표없이 이러한 숫자를 변경하고,잘림 점은 문자가 아닌 픽셀로 측정됩니다 - 좁은 문자로 가득 찬 제목보다 더 빨리 넓은 문자 클립으로 가득 찬 제목. 사양이 아닌 안전한 대상으로 취급하십시오.
| 플랫폼 | 추천 이미지 | 비율 | 제목이 표시되었습니다 | 설명 표시 | 노트 |
|---|---|---|---|---|---|
| 페이스북 | 1200x630 | 1.91:1 | ~60자 | ~155자 | 최소 200x200; 중심 자르기 비비율 이미지 |
| X / 트위터(대형) | 1200x628 | ~1.91:1 | ~60자 | ~110자 | 필요 twitter:card=summary_large_image |
| X / 트위터(요약) | 800x800 | 1:1 | ~50자 | ~90자 | 최소 144x144; 정사각형 이미지가 필요합니다 |
| 링크드인 | 1200x627 | ~1.91:1 | ~100자 | 종종 숨겨진 | 설명 자주 카드에서 떨어졌다 |
| 느슨해짐 | 1200x630 | 1.91:1 | ~60자 | ~140자 | 컴팩트한 첨부파일; unpurl 캐시는 자체적으로 만료됩니다 |
| 불화 | 1200x630 | 1.91:1 | ~60자 | ~160자 | 설명을 눈에 띄게 렌더링하고 이미지를 더 작게 렌더링합니다 |
테이블에서 테이크 아웃은 디자인 목표입니다: 1200x630 이미지, 55-60 자 이하의 제목, 110 이하로 떨어지는 설명은 플랫폼 당 튜닝없이 모든 곳에서 올바르게 렌더링되는 카드를 제공합니다.
자주 묻는 질문
올바른 오픈 그래프 이미지 크기는 무엇입니까?
1200x630 픽셀을 사용 - 1.91:1 비율. 그것은 큰 이미지 카드에 대한 페이스 북, 링크드 인, X, 슬랙, 디스코드를 동시에 만족하고, 고밀도 디스플레이에 날카로운 유지하기에 충분히 큰 파일을 약 5 MB 이하로 유지하고, 절대 URL에서 HTTPS를 통해 제공하고, 표면이 약간 다른 양으로 자르기 때문에 가장자리에서 중요한 텍스트를 멀리 유지. 컴팩트 X 요약 카드의 경우, 대신 적어도 144x144 의 사각형 이미지를 제공합니다.
태그를 수정한 후에도 링크 미리보기에 이전 이미지가 계속 표시되는 이유는 무엇입니까?
플랫폼이 일반적으로 약 일주일 동안 이전 스크랩의 결과를 캐시했기 때문입니다. 태그를 업데이트해도 해당 캐시가 무효화되지는 않습니다. platform's 디버거를 통해 새로 가져오도록 강제합니다. - Facebook 공유 Debugger's Scrape Again 버튼 또는 LinkedIn Post Inspector. Slack 및 Discord 의 경우 URL 에 쿼리 매개 변수를 추가하면 즉시 캐시되지 않은 미리보기가 생성되며 이는 수정 사항을 확인하는 가장 빠른 방법입니다.
OG: 및 Twitter: Tags가 모두 필요합니까?
Twitter에 해당하는 항목이 누락되면 X는 Open Graph로 돌아가므로 페이지가 완성됩니다 og: 태그는 작동하는 X 카드를 생성합니다. Open Graph 가 표현할 수 없는 것은 카드 레이아웃이므로 계속 추가해야 합니다 twitter:card 대형 배너와 컴팩트한 요약 중에서 선택하세요 twitter:site 그리고 twitter:creator 카드의 속성을 지정합니다. 그 세 플러스 완전한 오픈 그래프 태그는 효율적인 조합입니다.
얼마나 오래 og:title 및 og:description 해야 합니까?
유지하다 og:title 에 또는 약 60 자 미만. 에 대한 og:description 플랫폼은 다양하다: X 는 대략 110 자,페이스북과 링크드인은 155 에서 200 에 가깝게 보여준다. 더 엄격한 X 한계에 쓰는 것은 설명이 모든 곳에서 완전히 읽힌다는 것을 의미한다. 한계를 지나는 텍스트는 손실되지 않고 단지 줄임표 뒤에 숨겨져 있으므로 중요한 단어를 미리 불러옵니다.
미리보기가 비어 있거나 URL만 표시되는 이유는 무엇입니까?
일반적인 원인은 대략적인 빈도 순서로 표시됩니다: og:image 절대 URL이 아닌 상대 경로입니다; 이미지는 일반 위에 제공됩니다 http; 태그는 외부에 있습니다 <head>; 태그는 스크레이퍼가 실행하지 않는 클라이언트 측 JavaScript 에 의해 주입됩니다; 또는 페이지가 200 이 아닌 상태 또는 봇에 대한 로그인 리디렉션을 반환합니다. view-source 또는 로 원시 HTML 을 확인하십시오 curl 브라우저 검사기보다는 검사기는 JavaScript가 실행된 후 DOM을 표시하는데, 이는 스크레이퍼가 보는 것과 다릅니다.
이 도구는 태그를 읽기 위해 내 URL을 가져오나요?
아니요. 네트워크 요청을 전혀 하지 않습니다. 입력하거나 붙여넣는 태그에서 작동하며 모든 것이 브라우저에서 구문 분석되고 렌더링됩니다. 브라우저는 CORS 때문에 임의의 타사 페이지를 가져올 수 없으며 서버 측 가져오기는 미공개 URL 을 다른 곳으로 보내는 것을 의미합니다. 절충점은 태그를 제공한다는 것입니다. 그리고 이점은 localhost,staging 또는 로그인 뒤의 페이지가 공개 페이지와 똑같이 작동한다는 것입니다.
아직 게시되지 않은 페이지를 미리 볼 수 있나요?
예,그리고 플랫폼 디버거가 아닌 이것을 사용하는 주된 이유입니다. 공식 디버거는 라이브 URL 을 가져와야하므로 배포 전에 쓸모가 없습니다. 여기에 템플릿,프레임워크 메타 데이터 개체 또는 로컬 빌드에서 - 배송하려는 태그를 붙여 넣으면 미리보기가 즉시 렌더링됩니다.
Open Graph 태그가 검색 순위에 도움이 되나요?
직접적으로는 아닙니다. 소셜 및 채팅 플랫폼에서 읽히며 검색 엔진에서 순위 요소로 사용되지 않습니다. 그들이 영향을 미치는 것은 링크의 모든 공유에 대한 클릭률이며, 이는 트래픽을 유도하고 간접적으로 중요한 신호를 SEO 레버가 아닌 공유 링크에 대한 변환 최적화로 생각합니다. 검색 조각에 영향을 미치는 태그의 경우 다음을 사용하십시오 메타 태그 생성기.
