로컬 및 스테이징에서 OG 태그 확인

다음

온라인 링크 스크레이퍼는 localhost, 사내망, 로그인으로 보호된 스테이징 사이트에 접근할 수 없습니다. 이 검사기는 붙여 넣은 HTML을 대상으로 동작하므로, 페이지를 공개하기 전에도 og 태그와 Twitter 카드 태그를 테스트할 수 있습니다.

비공개 또는 로컬 페이지 테스트 방법

  1. 1

    로컬에서 페이지 열기

    브라우저에서 localhost 또는 스테이징 주소로 페이지를 엽니다. 필요하면 로그인 상태를 유지하세요.

  2. 2

    소스 복사

    view-source를 열고 head 또는 문서 전체를 복사하세요.

  3. 3

    여기에 붙여 넣기

    페이지 head HTML 입력란에 붙여 넣은 뒤 다음, 결과 순서로 클릭하세요.

  4. 4

    공개 전에 수정

    빨간색 항목을 모두 고치고, 로컬 페이지를 새로 고친 다음 소스를 다시 복사해 다시 확인하세요.

URL 스캐너가 실패하는 곳에서 붙여 넣은 HTML이 작동하는 이유

URL을 받는 스크레이퍼는 인터넷에서 페이지를 가져와야 합니다. http://localhost:3000, 사설망의 페이지, 비밀번호를 요구하는 스테이징 사이트는 열 수 없습니다. 이 검사기는 붙여 넣은 텍스트만 읽기 때문에 이런 제약이 문제되지 않습니다. 브라우저에서 페이지가 보인다면 그 태그를 확인할 수 있습니다.

공개 전에 확인할 항목

확인 항목 스테이징에서 중요한 이유
og:url 스테이징 또는 로컬 주소를 가리킨 채로 남아 있기 쉬우며, 운영 URL로 바꿔야 합니다
og:image 상대 경로나 로컬 주소는 다른 사람에게 작동하지 않습니다
og:title과 og:description 템플릿에 남은 자리표시자 문구는 놓치기 쉽습니다
twitter:card 새 템플릿에서 잊기 쉽습니다

가장 흔한 출시 실수는 스테이징 값을 운영에 그대로 옮기는 것입니다. 붙여 넣은 뒤에는 표시된 og:url과 og:image를 꼼꼼히 읽으세요. 둘 중 하나에 localhost나 스테이징 호스트 이름이 들어 있으면 템플릿에서 고쳐야 합니다.

예시

로컬 페이지가 다음과 같은 og:url을 출력한다고 가정해 봅시다.

<meta property="og:url" content="http://localhost:3000/pricing">

검사기는 태그가 존재하므로 og:url을 있음으로 표시하고 값을 보여 줍니다. 문제는 태그가 아니라 값입니다. 운영 템플릿은 https://yourdomain.com/pricing을 출력해야 합니다.

로컬 검사의 한계

이 도구는 마크업이 텍스트로서 완전하고 올바른지만 알려 줍니다. 사이트가 공개된 뒤 소셜 플랫폼이 이미지를 가져올 수 있는지는 확인할 수 없습니다. 이는 최종 공개 주소에 접근할 수 있는지에 달려 있기 때문입니다. 출시 후에는 라이브 URL을 비공개 채팅으로 공유하거나, 플랫폼 스크레이퍼에 한 번 넣어 실제 카드를 확인하세요.

출시 전 루틴

이 점검을 릴리스 절차에 포함하세요. 템플릿마다 대표 페이지 하나의 렌더링된 소스를 복사해 여기에 붙여 넣고, 표시된 og:url과 og:image에 로컬 또는 스테이징 주소가 없는지 읽어 보세요. 최종 빌드 후에도 다시 하세요. 늦은 단계의 템플릿 변경으로 스테이징 주소가 되돌아올 수 있기 때문입니다. 1분이면 충분하며, 출시 당일 카드가 깨지는 일을 막을 수 있습니다.

자주 묻는 질문

네. 로그인한 상태에서 페이지를 열고 소스를 복사해 붙여 넣으세요. 이 도구는 페이지를 직접 방문하지 않습니다.

아니요. 태그가 있다는 사실과 값을 보고합니다. 값을 읽고 로컬 또는 스테이징 주소가 있으면 바꾸세요.

og 태그와 twitter 태그는 head에 있으므로 head만으로 충분합니다. 페이지 전체를 붙여 넣어도 작동합니다.

복사한 소스에 태그가 들어 있을 때만 가능합니다. 크롤러는 보통 원본 HTML을 읽으므로, 스크립트로 나중에 추가된 태그는 찾지 못합니다.

관련 도구

이 도구는 다른 언어로도 제공됩니다

사용 가이드와 활용 사례