Open Graph(오픈 그래프)

오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여

페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을

모든 웹페이지에서 가능하게끔 하는 것이었고, 이후 트위터와 링크드인에서 이를 차용하여 더 나은 UX를 제공하는 데에 활용하고 있다.

그래프 태그는 og:title, og:url, og:image, og:image:alt, og:description 이런식으로 og가 붙는 특징이 있다.

위 이미지를 기준으로 다양한 플랫폼에서 미리보기를 테스트해본 결과, 어느 플랫폼에서든 알맞게 표시되는 이미지 크기는 1100x740였다.

프론트엔드 측면에서 웹 사이트 접근성 향상 시키기(Next13)

똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기) | 비브로스 기술 블로그

✅ 1. Google 검색엔진이 웹페이지를 처리하는 기본 단계

Google 검색엔진은 JavaScript가 포함된 사이트도 아래 3단계로 처리한다:

1. 크롤링 (Crawling) — Googlebot이 URL을 가져와 HTML을 수집
2. 렌더링 (Rendering) — Googlebot이 Chrome과 비슷하게 페이지를 렌더하여 자바스크립트에 의해 생성된 콘텐츠를 완성
3. 색인(Indexing) — 렌더된 콘텐츠를 DB에 저장하고 검색결과에 포함할 준비를 함

👉 즉, 렌더링 이후에만 색인이 생성된다.

✅ 2. JavaScript SEO에 대한 일반적인 오해와 진실 (Vercel 연구)

Vercel + MERJ의 100,000+ Googlebot fetch 분석 결과, 다음 오해들은 잘못된 속설로 밝혀졌다:

✔ X: Google은 JavaScript 콘텐츠를 렌더링하지 못한다

✔ X: Google은 JavaScript 페이지를 다르게 처리한다