태그를 업데이트한 후 내 링크 미리보기에 이전 이미지가 표시되는 이유는 무엇입니까?

모든 주요 플랫폼은 페이지를 스크랩한 결과를 캐시하는데,종종 일주일 이상 동안,수정하기 전에 공유한 링크가 오래된 카드를 계속 보여줍니다. 태그를 업데이트해도 그 캐시가 저절로 무효화되지는 않습니다. 플랫폼 디버거 - Facebook 공유 디버거,LinkedIn Post Inspector 또는 Slack 에서 다시 공유하여 URL 을 다시 스크랩하여 새로 가져오도록 합니다. URL 에 무해한 쿼리 문자열을 추가하면 테스트를 위한 캐시 없는 미리 보기도 생성됩니다.

OG: 및 Twitter: Tags가 모두 필요합니까?

항상 그런 것은 아니지만 둘 다 포함하는 것이 더 안전합니다. X 는 twitter: 등가물이 누락되었을 때 Open Graph 태그로 다시 떨어지므로 og: title,og: description 및 og: image 만있는 페이지는 여전히 카드를 생성합니다. Open Graph에서 표현할 수없는 것은 카드 스타일입니다: twitter:card 는 큰 배너와 컴팩트 요약 레이아웃 사이에서 결정하고 twitter:site 및 twitter:creator 는 카드를 계정에 속시킵니다. 그 세 가지를 추가하고 og: 태그가 나머지를 덮도록하십시오.

내 og:title 및 og:description은 얼마나 길어야 합니까?

Keep og:title at or under about 60 characts - 대부분의 카드는 그 과거를 자르고 좁은 모바일 카드는 더 빨리 클립합니다. og:description 의 경우 한계가 갈라집니다: X 는 대략 110 자를 보여주고,Facebook 과 LinkedIn 은 155 에서 200 에 더 가깝게 보여줍니다. 더 엄격한 X 제한에 쓰면 설명이 모든 곳에서 완전히 읽혀집니다. 손실되지 않은 과거의 모든 것은 단지 줄임표 뒤에 숨겨져 있으므로 중요한 단어를 미리로드하십시오.

내 미리보기가 비어 있거나 URL만 표시되는 이유는 무엇입니까?

일반적인 원인은 절대 URL 이 아닌 상대 경로인 og:image,일반 http 를 통해 제공되는 이미지, 외부에 배치된 태그,스크레이퍼가 실행되지 않는 클라이언트 측 JavaScript 에 의해 삽입된 태그 또는 스크레이퍼에 대한 200 상태가 아닌 상태 또는 로그인 리디렉션을 반환하는 페이지의 태그가 서버가 반환하는 원시 HTML 에 나타나는지 확인합니다 - 브라우저 검사기가 아닌 소스 보기,검사기는 JavaScript 가 실행된 후 DOM 을 보여주기 때문입니다.

이 도구가 태그를 확인하기 위해 내 URL을 가져오나요?

...이 아닌 . 네트워크 요청을 전혀 하지 않습니다. 양식에 입력하거나 HTML로 붙여 넣는 태그에서 작동하며 모든 것이 브라우저에서 구문 분석되고 렌더링됩니다. 이는 의도적인 디자인 선택입니다. 브라우저는 CORS로 인해 임의의 제3자 페이지를 가져올 수 없으며 서버 측 가져오기는 릴리스되지 않은 URL을 다른 사람에게 보내는 것을 의미합니다. 아무것도 가져오지 않기 때문에 localhost, staging 또는 로그인 뒤에 있는 페이지의 유효성을 검사할 수 있습니다.

아직 게시되지 않은 페이지를 미리 볼 수 있습니까?

예,그리고 플랫폼 디버거가 아닌 이와 같은 도구를 사용하는 주된 이유입니다. 공식 디버거는 라이브 URL 을 가져와야하므로 배포되지 않은 페이지에는 쓸모가 없습니다. 여기서는 단순히 배송하려는 태그를 붙여 넣기 만하면됩니다 - 템플릿,프레임워크 메타 데이터 개체 또는 로컬 빌드 - 그리고 미리보기가 즉시 렌더링되므로 배포가 필요하지 않습니다.

태그를 남기면 어떻게 됩니까?

스크레이퍼는 뒤로 물러나고 대체는 예측할 수 없습니다. og:title 이 없으면 일반적으로 태그를 사용하고 og:description 이 없으면 메타 설명이나 본문 텍스트를 긁을 수 있습니다. og:image 가 없으면 대부분의 플랫폼은 텍스트 전용 카드를 보여 주지만 일부는 페이지에서 임의의 이미지를 가져 오지만 종종 로고 또는 추적 픽셀을 사용합니다. og:url 이 없으면 공유 주소가 그대로 사용되며 이는 추적 매개 변수가 공유 개수를 조각화 할 수 있음을 의미합니다. 태그를 명시적으로 설정하는 것이 결과를 제어하는 유일한 방법입니다.

Open Graph 마크업이 검색 순위에 도움이 되나요?

직접적으로는 아닙니다. Open Graph 태그는 소셜 및 채팅 플랫폼에서 읽혀지며 검색 엔진에서 순위 요소로 사용되지 않습니다. 그들이 영향을 미치는 것은 링크의 모든 공유에 대한 클릭률이며,이는 트래픽을 유도하고 시간이 지남에 따라 중요한 신호를 SEO 순위 레버가 아닌 공유 링크에 대한 변환 최적화로 취급합니다.

Open Graph 미리보기 도구는 무료이며 비공개입니까?

네. 가입하지 않고도 완전히 무료이며 모든 구문 분석, 유효성 검사 및 미리보기는 브라우저 내에서 JavaScript에서 발생합니다. 입력한 제목, URL 및 이미지 링크는 서버로 전송되지 않으며 페이지가 로드되면 도구가 오프라인으로 계속 작동합니다.

Open Graph 미리보기

Facebook, X, LinkedIn, Slack 및 Discord에서 링크가 어떻게 표시되는지 미리 보고, OG: 태그를 확인하고 올바른 메타 블록을 복사합니다.

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook