OG(Open Graph) 적용이 안돼요 (feat. Google Search Console)
개요
블로그 게시글을 SNS에 공유할 때, 메인 도메인의 타이틀과 미리보기만 보였던 이슈와, Google Search Console에서 게시글 색인이 생성되지 않았던 이슈를 해결하는 과정을 소개합니다.
OG(Open Graph)란?
해결과정을 소개하기 앞서, OG가 무엇인지 간단하게 설명하고 넘어가겠습니다.
OG는 웹 페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화 하여 해당 컨텐츠에 대한 요약적인 내용을 사용자에게 노출함으로써 SNS에 게시되는데 특화된 프로토콜입니다.
페이스북이 최초로 발표했고, 트위터, 링크드인, 네이버, 카카오톡 등 널리 사용되고 있습니다.
게시글 깨알 홍보
어떻게 적용할까?
메타데이터 ㅇ쩌고
제목 뭐로하지
백엔드 개발자로써 나만의 서버, 나만의 서비스, 나만의 기술 블로그를 오픈해야지 라는 생각에 중고로 맥미니 2018를 샀습니다.
하지만 기술 블로그를 만드려 하다보니 디자인과 css라는 벽이 너무 커서 반 포기상태로 지내고 있다가.. "개발바닥" 이라는 카카오톡 오픈톡방에서 어느분이 올려주신 기술 블로그를 보다가 이 블로그를 만들게 도와준 Docusaurus라는 사이트 제너레이트 서비스를 알게 되었습니다.
로컬에서 테스트로 한번 띄워보고 이거다! 싶어서 바로 가비아에서 도메인을 사서 맥미니에 연결했습니다.
개발 블로그 역사의 시작
그리고 바로 지인들에게 개인 개발 블로그가 생겼다고 카카오톡으로 블로그 링크를 보내면서 자랑했습니다 ㅋㅋ..
이때까지는 아무것도 수정하지 않고 바로 올려봤던 상황이라 당연히 Docusaurus의 기본 썸네일과 블로그 타이틀이 미리보기에 보였습니다.
이때는 OG의 개념을 모르고 단순하게 해당 페이지의 타이틀과 첫번째 이미지? 가 보여지는 줄 알았습니다.
이상한점 발견
24년 7월 4일 드디어 첫 게시글을 작성하고 자랑스럽게 카카오톡으로 링크를 공유했으나..
분명 링크는 방금 작성한 링크인데도 불구하고 타이틀과 썸네일이 아직도 기본으로 보였씁니다
이전에 티스토리로 글을 올렸을때는 바로 보였는데 뭔가 설정을 해줘야 하나..?
해결과정
도대체 타이틀이랑 썸네일도 적용이 안되고, 구글 서치콘솔도 계속 수집을 하지 못했습니다.
-
게시글 하나 쓰고 공유를 했는데 아직 그대로 메인 썸네일과 타이틀
-
구글 서치콘솔도 안됨
-
구글링하다가 og에 대해 알게됨 카카오톡, 메타, 등 디버거 사이트 공유
디버거엔 메인으로만 연결되어있다고 함
-
하지만 상세 페이지는 개발자도구를 보니 제대로 먹혀있는 상태임
-
대체 뭐가 문제일까
이제 블로그 구성보다는 nginx에 의심이 가기 시작했습니다. 아니나 다를까..
개발 블로그 역사의 시작
-
nginx 설정 바꾸기
-
와 해결
-
구글서치콘솔 해결?