웹사이트를 만들다 보면 결국 사람들이 내 사이트를 공유하길 바라게 된다. 그런데 막상 카카오톡이나 페이스북에 링크를 붙여넣으면 밋밋한 URL만 덩그러니 나오는 경우가 있다. 반면 어떤 사이트들은 멋진 썸네일 이미지에 제목, 설명까지 깔끔하게 나온다. 이 차이를 만드는 게 바로 **Open Graph Protocol**이다. Open Graph는 Facebook이 2010년에 만든 메타데이터 프로토콜인데, 지금은 사실상 표준처럼 쓰인다. 카카오톡, 트위터, 링크드인, 슬랙 등 거의 모든 플랫폼이 이걸 파싱해서 링크 미리보기를 만든다. 오늘은 이 Open Graph가 어떻게 동작하는지, 그리고 실제로 구현하는 방법을 직접 테스트하며 알아보려고 한다. ## Open Graph의 구조 Open Graph는 기본적으로 HTML `` 태그 안에 `` 태그로 정의된다. 크롤러가 페이지를 읽을 때 이 메타 태그들을 파싱해서 미리보기 카드를 만드는 방식이다. ```html ``` 가장 중요한 4가지 속성을 먼저 보자: ### og:title 페이지 제목이다. SNS에서 링크 미리보기의 큰 텍스트로 나온다. `

PostgreSQL Shared Buffer 깊게 파보기

웹 서버를 운영하거나 데이터베이스를 운용하게 되는 경우...

``` 이제 이걸 배포하고 나면, 페이스북이나 카카오톡에서 어떻게 보일지 미리 확인할 수 있다. 페이스북은 공식 디버거 도구를 제공한다: ``` https://developers.facebook.com/tools/debug/ ``` 여기에 URL을 넣으면 페이스북 크롤러가 어떻게 파싱하는지 바로 확인할 수 있다. 만약 이미지가 안 보인다면 아래를 체크해보자: 1. 이미지 URL이 **https**인가? 2. 이미지 파일이 실제로 접근 가능한가? 3. 이미지 크기가 너무 작지 않은가? (최소 200x200px) ## 트위터는 다르다: Twitter Card 트위터는 Open Graph도 읽지만, 자체 프로토콜인 **Twitter Card**를 선호한다. 다행히 문법은 거의 똑같다: ```html ``` `twitter:card`는 카드 타입을 지정한다: - `summary`: 작은 정사각형 이미지 - `summary_large_image`: 큰 직사각형 이미지 (추천) 트위터도 검증 도구가 있다: ``` https://cards-dev.twitter.com/validator ``` ## 동적으로 메타 태그 생성하기 실제 웹사이트에서는 페이지마다 다른 메타 태그를 보여줘야 한다. 내 위키 사이트를 예로 들어보자. ### FastAPI + Jinja2 예시 ```python @app.get("/wiki/{article_id}") async def view_article(article_id: str): article = get_article(article_id) # 본문에서 description 추출 (마크다운 제거) import re content = article.content content = re.sub(r'```[\s\S]*?```', '', content) # 코드 블록 제거 content = re.sub(r'`[^`]+`', '', content) # 인라인 코드 제거 content = re.sub(r'\[([^\]]+)\]\([^\)]+\)', r'\1', content) # 링크 content = re.sub(r'^#{1,6}\s+', '', content, flags=re.MULTILINE) # 헤더 description = content.strip()[:160] + "..." return templates.TemplateResponse("wiki.html", { "article": article, "description": description }) ``` 템플릿에서는 이렇게 쓴다: ```jinja2 ``` ## 실제 크롤러 동작 확인하기 크롤러가 실제로 뭘 가져가는지 로그로 확인해볼 수 있다. nginx 로그를 보면: ```bash tail -f /var/log/nginx/access.log | grep -i "bot\|crawler" ``` 페이스북 크롤러는 User-Agent가 이렇다: ``` facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) ``` 카카오톡은: ``` kakaotalk-scrap/1.0 ``` 슬랙은: ``` Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots) ``` ## 캐싱 문제 해결하기 메타 태그를 수정했는데도 SNS에서 예전 내용이 계속 보인다면? 크롤러가 캐싱을 하기 때문이다. ### 페이스북 캐시 갱신 ```bash curl -X POST \ -F "id=https://my-wiki.com/wiki/postgres-buffer" \ -F "scrape=true" \ "https://graph.facebook.com/" ``` 또는 페이스북 디버거 도구[^1] 에서 "Scrape Again" 버튼을 누르면 된다. ### 카카오톡 캐시 갱신 카카오톡은 공식 API가 없어서 시간이 지나야 한다. 보통 2주 정도 캐싱하는 것 같다. 급하면 URL에 쿼리 파라미터를 붙이는 편법이 있다: ``` https://my-wiki.com/wiki/postgres-buffer?v=2 ``` ## 실전 팁 ### 1. 이미지는 CDN에 올려라 Open Graph 이미지는 크롤러가 다운로드할 수 있어야 한다. 로컬 개발 환경(localhost)에 있으면 당연히 안 된다. 꼭 공개 URL을 쓰자. ### 2. 크기 최적화 1200x630px PNG 파일은 용량이 크다. WebP로 변환하고 압축하면 로딩이 빨라진다: ```bash cwebp -q 80 thumbnail.png -o thumbnail.webp ``` ### 3. 기본 이미지 준비 특정 페이지에 이미지가 없을 때를 대비해 사이트 로고나 기본 썸네일을 준비해두자: ```jinja2 ``` ### 4. og:type 활용 `article`만 있는 게 아니다: - `website`: 일반 웹페이지 - `article`: 블로그 글, 위키 문서 - `video.movie`: 영화 - `music.song`: 음악 타입에 따라 추가 메타 태그를 쓸 수 있다: ```html ``` ## 결론 Open Graph는 단순히 메타 태그 몇 개 추가하는 것 같지만, 제대로 설정하면 SNS 유입이 확 늘어난다. 특히 개발 블로그나 기술 문서는 링크 공유가 주요 유입 경로니까 꼭 챙기자. 핵심 체크리스트: - ✅ `og:title`, `og:description`, `og:image`, `og:url` 필수 4종 - ✅ 이미지는 1200x630px, 절대 경로, https - ✅ description은 160자 내외 - ✅ 페이스북/트위터 디버거로 검증 - ✅ 동적 페이지는 서버에서 메타 태그 생성 한 번 설정해두면 모든 SNS에서 자동으로 예쁜 미리보기가 나온다. [^1]: [페이스북 공유 디버거](https://developers.facebook.com/tools/debug/) 로 캐싱된 오픈그래프를 다시 재 스크랩 시킬수있다.