OGP(Open Graph Protocol)는 웹 페이지가 SNS에서 공유될 때 나타나는 미리보기(제목·설명·썸네일)를 제어하는 규격입니다. HTML에 <meta property="og:title" content="..."> 같은 태그를 넣으면 Twitter(X), Facebook, Slack 등이 자동으로 공유 카드를 생성합니다.
그렇다면 브라우저에서 직접 해당 페이지 HTML을 가져오면 되지 않을까요? 여기서 CORS(Cross-Origin Resource Sharing)라는 제약이 있습니다. 브라우저는 보안상 다른 도메인으로의 fetch 요청을 제한하며, 상대 서버가 허용하지 않는 한 응답을 읽을 수 없습니다. 대부분의 웹사이트는 이를 허용하는 헤더를 설정하지 않습니다.
그래서 이 도구는 입력된 URL을 /api/ogp?url=...로 전송하고, Vercel 서버리스 함수가 서버 측에서 해당 페이지를 fetch합니다. 서버는 CORS 제약이 없으므로 어떤 페이지의 HTML도 가져올 수 있습니다. 가져온 HTML에서 정규표현식으로 og:title, twitter:card 등의 메타태그를 추출하여 JSON으로 반환합니다.
반환된 데이터를 바탕으로 각 태그의 유무·내용·글자 수 등을 체크하여 결과를 표시합니다.