웹 페이지가 소셜 미디어에서 공유될 때 시각적으로 매력적인 미리보기를 제공하는 방법 중 하나가 오픈 그래프(Open Graph, OG) 태그를 활용하는 것이다.
이 포스팅에서는 OG 태그의 개념과, CSR(클라이언트 사이드 렌더링)에서 어떻게 활용할 수 있는지에 대해 자세히 다루어 보겠다.
오픈 그래프 태그란?
오픈 그래프(Open Graph) 태그는 웹 페이지가 소셜 미디어에서 공유될 때 제목, 설명, 이미지 등 메타데이터를 정의하는 메타 태그그이다. 페이스북에서 시작된 프로토콜이지만, 현재 트위터, 링크드인, 카카오톡 등 다양한 소셜 미디어 플랫폼에서 널리 사용되고 있다. OG 태그는 링크가 소셜 미디어에서 공유될 때 페이지의 정보를 효과적으로 전달하고 클릭을 유도할 수 있도록 도와준다. 이를 통해 페이지의 가시성과 클릭률을 높이는 데 큰 도움이 된다. 예를 들어, 카카오톡으로 웹 사이트 링크를 공유했을 때, 페이지를 미리 볼 수 있는 것도 해당 태그의 역할이 하는 것이다.
기본 OG 태그
OG 태그는 다음과 같은 메타 태그들을 포함하여 페이지의 주요 정보를 제공한다.
1. og:title : 페이지 제목
<meta property="og:title" content="My Awesome Webpage" />
2. og:description : 페이지 설명
<meta property="og:description" content="This is an awesome webpage that covers interesting topics." />
3. og:image : 대표 이미지
<meta property="og:image" content="https://example.com/image.jpg" />
4. og:url : 페이지 URL
<meta property="og:url" content="https://example.com/my-webpage" />
5. og:type : 페이지 유형 (예: article, website 등)
<meta property="og:type" content="website" />
이 외에도 og:site_name(웹사이트 이름), og:locale(언어 및 지역 정보), og:image:width(이미지의 가로 길이), og:image:height(이미지의 세로 길이) 등을 추가적으로 설정할 수 있다.
OG 태그의 작동 방식
OG 태그는 웹 페이지에 메타 태그로 추가되며, 소셜 미디어 플랫폼이 페이지를 요청할 때 서버로부터 반환된 HTML을 통해 읽어들인다. 이를 통해 제목, 설명, 이미지 등을 구성하여 링크 미리보기를 생성한다.
다음은 Next.js에서 SSR 방식으로 OG 태그를 사용하는 간단한 예시이다.
// pages/blog/[id].js
import Head from 'next/head';
export async function getServerSideProps({ params }) {
const { id } = params;
const response = await fetch(`https://example.com/api/posts/${id}`);
const post = await response.json();
return {
props: { post },
};
}
export default function BlogPost({ post }) {
return (
<>
<Head>
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.description} />
<meta property="og:image" content={post.image} />
<meta property="og:url" content={`https://example.com/blog/${post.id}`} />
<meta property="og:type" content="article" />
</Head>
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
</>
);
}
CSR에서 OG 태그가 작동하지 않는 이유는 무엇일까?
클라이언트 사이드 렌더링(CSR) 방식에서는 OG 태그가 소셜 미디어 크롤러에 제대로 인식되지 않는다. 이는 OG 태그가 서버 측에서 HTML이 생성될 때 추가되어야 하기 때문인데, CSR 방식에서는 페이지 초기 로드 시 빈 HTML이 서버에서 전송되고, JavaScript가 클라이언트 측에서 실행되기 때문에 소셜 미디어 크롤러가 HTML 내 OG 태그를 읽어내지 못하기 때문이다. 따라서 OG 태그를 활용하여 링크 미리보기를 제공하려면 SSR 또는 SSG 방식이 필요하다.
CSR 환경에선 SEO를 해결할 수 없을까?
CSR(Client-Side Rendering) 환경에서도 SEO 최적화를 위한 다양한 방법이 있다. CSR 방식에서는 SEO가 제한적이지만, 리액트에서 react-helmet, react-snap과 같은 라이브러리와 프리 렌더링 도구를 통해 메타 정보를 최적화하고 검색 엔진 친화적인 구조를 구축할 수 있다. 추가로, Puppeteer 같은 헤드리스 브라우저를 사용한 서버 렌더링, NGINX 프록시 서버에서 미리 렌더링된 HTML 제공, Next.js의 SSR/CSR 조합, 구글 Dynamic Rendering으로 크롤러에 서버 렌더링된 HTML 제공, Express 서버 미들웨어를 통한 커스터마이징 등으로 CSR에서도 SEO 성능을 보완할 수 있다. 그러나 SEO가 중요한 경우에는 SSR이나 SSG를 고려하는 것이 더 효과적라고 한다.
'개발 > 프론트엔드' 카테고리의 다른 글
| Redux Toolkit을 도입하면서 (1) | 2024.12.23 |
|---|---|
| 왜 Redux 대신 Redux Toolkit을 사용하는가? (4) | 2024.12.23 |
| 브라우저가 리소스를 로드하는 과정에서 성능을 최적화하는 방법 (3) | 2024.10.05 |
| 프론트엔드 개발자가 알아야 할 백엔드 JWT 인증 및 권한 관리 (1) | 2024.09.29 |
| Flux 패턴 (2) | 2024.09.17 |