정신없이 바쁜 3-2를 보내고 종강 후에야 숨을 좀 돌리면서 블로그를 쓰게 됐다.
연합 프로젝트를 하면서 기술적으로도, 협업적으로도 정말 많은 걸 느꼈는데
그중 이번 글에서는 오픈 그래프(Open Graph)와 메타 태그 설정을 통한 SEO 최적화에 대해 정리해보려고 한다.
개발을 하다보니
“카톡으로 링크 공유했을 때 왜 미리보기가 안 뜨고 Vite + React + TS로 뜰까?”,
“검색했는데 우리 사이트가 잘 안 나오네?”
같은 고민을 자연스럽게 하게 됐고, 그 과정에서 SEO의 중요성을 체감하게 됐다.
SEO란?
SEO(Search Engine Optimization)는 검색 엔진이 내 글이나 사이트를 잘 이해하고, 검색 결과 상단에 보여주도록 최적화하는 작업이다.
쉽게 말하면 사람들이 검색했을 때 내 글이 뜨게 만드는 방법이다.
예를 들어,
-
React useEffect를 검색했을 때
→ 그냥 일기처럼 쓴 글 (X)
→useEffect 동작 원리 정리같은 글 (O) -
Velog SEO를 검색했을 때
→ 제목, 설명, 구조가 잘 잡힌 글이 위에 노출됨
즉, 같은 내용을 써도 SEO를 고려했는지에 따라 노출 차이가 꽤 크다.
특히 Velog나 개인 프로젝트 페이지처럼
플랫폼의 힘보다 검색 유입에 의존하는 경우에는 더 중요하게 작용한다!
index.html에서 SEO / OG 메타 태그 정리
Vite + React 같은 SPA 프로젝트에서는 HTML이 딱 한 장 index.html 이고, 실제 화면은 JS가 실행된 뒤 렌더링된다.
그래서 “SEO는 어차피 약한 거 아냐?” 싶을 수 있는데, 그래도 검색 엔진/공유 플랫폼이 가장 먼저 읽는 정보가 head 메타태그라서 여기 세팅이 기본 베이스가 된다!
아래는 DevTalk 프로젝트에서 설정한 index.html 기준으로 하나씩 정리해본다.
기본 메타 태그
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />-
charset="UTF-8"
문서 인코딩을 UTF-8로 지정하여 한글 및 특수문자 깨짐을 방지한다. -
viewport
모바일 환경에서의 화면 크기와 스케일을 제어한다.
모바일 친화성은 검색 엔진 평가 요소 중 하나이므로 필수 설정이다.
title & description
<title>홍익대학교 DevTalk Seminar</title>
<meta name="description" content="홍익대학교 학우들을 위한 IT 세미나" />-
title
검색 결과의 제목과 브라우저 탭 제목으로 사용된다.
SEO에서 가장 중요한 메타 정보 중 하나다. -
description
검색 결과에서 제목 아래에 표시되는 요약 설명이다.
검색 순위보다는 클릭률(CTR)에 영향을 준다.
preload
<link
rel="preload"
href="/videos/mainPoster_fast.mp4"
as="video"
type="video/mp4"
/>- 초기 화면에서 즉시 사용되는 리소스를 미리 로드하여 로딩 성능을 개선한다.
- 성능 지표(LCP 등)는 SEO에 간접적인 영향을 미친다.
Open Graph 메타 태그
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hongikdevtalk.com/" />
<meta property="og:title" content="홍익대학교 DevTalk Seminar" />
<meta property="og:description" content="홍익대학교 학우들을 위한 IT 세미나" />
<meta property="og:image" content="https://hongikdevtalk.com/og-thumbnail.png" />
<meta property="og:site_name" content="홍익대학교 DevTalk Seminar" />
<meta property="og:locale" content="ko_KR" />- Open Graph는 링크 공유 시 노출되는 미리보기 정보를 정의한다.
og:title,og:description,og:image는 공유 카드의 제목, 설명, 썸네일로 사용된다.og:url은 공유 기준이 되는 대표 URL 역할을 한다.og:image는 절대 경로로 지정하는 것이 안전하다.
(찾아보니, 절대 경로로 지정해야 크롤러가 어디서 요청하든 정확한 리소스 위치를 알 수 있고, https 프로토콜과 도메인이 명확해서 안정적으로 잘 동작할 수 있다고 한다!)
따라서 public 폴더 아래에 og-thumbnail.png파일을 위치시키고,og:image에는 사이트 도메인을 포함한 절대 경로를 명시하여 외부 크롤러가 이미지 리소스를 안정적으로 참조할 수 있도록 설정했다.
메타 태그 설정 적용 결과
메타 태그 설정 이후, 브라우저 탭의 타이틀과 파비콘,
그리고 SNS 공유 시 노출되는 미리보기까지 의도한 형태로 정상 적용된 것을 확인할 수 있었다.
- 타이틀 및 파비콘 설정 적용 결과
- Open Graph 및 메타 태그 설정 적용 결과
단순한 설정이지만, 서비스에 처음 진입하거나 링크를 공유했을 때
사용자가 가장 먼저 접하게 되는 정보라는 점에서 메타 태그의 중요성을 다시 한 번 느꼈다.
번외
카카오톡에 링크를 공유했을 때 여전히 Vite + React + TS와 같은 기본 정보가 노출된다면, 이는 카카오 서버에 이전 Open Graph 정보가 캐시되어 있기 때문이다.
이 경우 https://developers.kakao.com/tool/clear/og 에서
사이트 URL(https://hongikdevtalk.com/)을 입력한 뒤 ‘캐시 초기화’를 수행하고
다시 링크를 공유하면 수정된 메타 정보가 정상적으로 반영된다!
메타 태그와 오픈 그래프 설정은 구현 난이도에 비해 효과가 분명한 영역이다.
작은 설정이지만 검색 결과와 공유 화면에서 서비스의 인상을 결정한다는 점에서, 초기 세팅 단계에서 함께 고려하는 것이 중요하다고 느꼈다.
앞으로도 기능 구현뿐만 아니라, 이런 기본적인 설정들까지 함께 챙기는 개발자가 되고 싶다....!! (ง •_•)ง
