Open Graph 미리보기
Open Graph title, description, URL, image, robots 정책을 미리 보고 공유 카드 크롤러 보고서를 복사해요.
브라우저에서만 처리입력값이 서버로 가지 않아요.
입력과 결과
입력한 내용은 이 브라우저에만 저장돼요. 다시 열면 마지막 작업을 불러올 수 있어요.
이럴 때 써요
- Open Graph title, description, URL, image, robots 정책을 미리 보고 공유 카드 크롤러 보고서를 복사해요.
- 브라우저 로컬 방식으로 입력을 다루며 복사 전 결과를 확인해요.
- Open Graph 미리보기와 관련 도구를 이어서 사용해 작업 흐름을 줄여요.
예제
- 일반 입력
Title, description, image URL- Open Graph 미리보기를 사용하기 전에 이 예제로 입력 흐름을 확인하세요.
- 일반 출력
카드 미리보기 / robots 정책 / 이미지 진단 / Open Graph 태그- 복사하기 전에 결과 형태와 다음 검토 지점을 확인하는 예제예요.
- 추가 예제
Title, description, image URL, canonical URL- 복사하기 전에 결과 형태와 다음 검토 지점을 확인하는 예제예요.
- 추가 예제
https://www.bobob.app/og-image.png- 복사하기 전에 결과 형태와 다음 검토 지점을 확인하는 예제예요.
자주 하는 실수
- Open Graph title, description, URL, image, robots 정책을 미리 보고 공유 카드 크롤러 보고서를 복사해요.
- 브라우저 로컬 처리 방식과 실제 입력 구조가 맞지 않으면 결과를 그대로 믿기 어려워요.
- 복사한 값에 운영 비밀값, 고객 데이터, 내부 URL이 섞여 있으면 공유 전에 제거해야 해요.
복사하기 전에
- 1원본 입력과 결과 형태를 한 번 더 비교해요.
- 2대상 런타임, 인코딩, 시간대, 보안 정책 차이를 확인해요.
- 3Open Graph 미리보기 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토해요.
참고 자료
Open Graph 명세는 `og:image` 를 URL 타입으로 정의해요. 상대 경로(`/og.png`)를 넣으면 크롤러가 못 받아서 미리보기가 빈칸으로 나와요. https 절대 주소로 적어야 해요.
기준 ogp.me
안 바뀐 미리보기는 대개 상대 쪽 캐시예요
메타 태그를 고쳐도 플랫폼이 이전에 긁어둔 걸 그대로 보여줘요. 각 플랫폼의 재수집 도구로 한 번 밀어줘야 바뀌어요. 우리 페이지가 틀린 게 아닌 경우가 많아요.
기준 플랫폼 크롤러 캐시 동작
자주 묻는 질문
Open Graph 미리보기 입력값은 어디에서 처리되나요?
가능한 작업은 브라우저에서 처리돼요. 운영 비밀값이나 고객 데이터는 넣지 않는 기준은 그대로 유지하세요.
결과를 그대로 운영에 써도 되나요?
복사하기 전에 대상 런타임, 인코딩, 시간대, 보안 정책처럼 환경별 차이를 한 번 더 확인하세요.