SEO와 SNS 공유를 위한 메타태그 총정리: title, canonical, Open Graph, Twitter Card
웹페이지를 만들 때 <title>과 <meta name="description">만 넣으면 SEO 설정이 끝난다고 생각하기 쉽습니다.
하지만 실제로는 검색엔진에 표시되는 정보와 카카오톡, 페이스북, X 같은 SNS에서 링크를 공유할 때 표시되는 정보가 서로 다릅니다.
검색엔진은 주로 다음 정보를 참고합니다.
<title>
<meta name="description">
<link rel="canonical">
<meta name="robots">
SNS와 메신저는 Open Graph 또는 Twitter Card 메타태그를 사용합니다.
og:title
og:description
og:image
og:url
twitter:card
twitter:title
twitter:description
twitter:image
이 글에서는 검색엔진용 메타태그와 SNS 공유용 메타태그의 차이, HTML 작성 예제, Next.js App Router 적용 방법, WordPress 설정 방법까지 정리합니다.
기본 메타태그 예제
가장 기본적인 HTML 메타태그 구성은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>페이지 제목 | 사이트 이름</title>
<meta
name="description"
content="검색 결과와 SNS 공유 화면에 사용할 페이지 설명입니다."
>
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
<meta property="og:type" content="article">
<meta property="og:title" content="페이지 제목">
<meta
property="og:description"
content="SNS에 공유할 때 표시할 페이지 설명입니다."
>
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta
property="og:url"
content="https://example.com/posts/meta-tags"
>
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="ko_KR">
<meta
name="twitter:card"
content="summary_large_image"
>
<meta name="twitter:title" content="페이지 제목">
<meta
name="twitter:description"
content="X에서 공유할 때 표시할 페이지 설명입니다."
>
<meta
name="twitter:image"
content="https://example.com/images/meta-tags-og.jpg"
>
</head>
<body>
...
</body>
</html>
각 태그는 비슷해 보이지만 역할이 다릅니다.
HTML title과 og:title 차이
<title>과 og:title은 모두 페이지 제목을 표현하지만 사용되는 위치가 다릅니다.
HTML title
<title>SEO와 SNS 공유를 위한 메타태그 총정리</title>
<title>은 브라우저 탭 제목과 검색엔진의 검색 결과 제목 후보로 사용됩니다.
일반적으로 다음 위치에 영향을 줍니다.
브라우저 탭
브라우저 방문 기록
즐겨찾기
검색엔진 검색 결과
페이지마다 내용을 정확하게 설명하는 고유한 제목을 작성하는 것이 좋습니다.
잘못된 예시는 다음과 같습니다.
<title>홈</title>
<title>게시물</title>
<title>사이트 이름</title>
모든 페이지가 같은 제목을 사용하면 검색엔진과 사용자가 각 페이지의 차이를 파악하기 어렵습니다.
권장 예시는 다음과 같습니다.
<title>리눅스 tar 압축과 해제 명령어 정리 | CheckVly</title>
<title>macOS에서 SVN 설치하는 방법 | CheckVly</title>
og:title
<meta
property="og:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
og:title은 링크를 카카오톡, 페이스북, 디스코드, 슬랙 같은 서비스에 공유할 때 미리보기 제목으로 사용됩니다.
<title>과 동일하게 작성해도 되지만, SNS 공유 화면에 맞게 조금 더 짧게 작성할 수도 있습니다.
예를 들어 HTML 제목은 사이트 이름까지 포함할 수 있습니다.
<title>
SEO와 SNS 공유를 위한 메타태그 총정리 | CheckVly
</title>
반면 Open Graph 제목에서는 사이트 이름을 제외할 수 있습니다.
<meta
property="og:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
사이트 이름은 별도의 og:site_name으로 지정할 수 있습니다.
<meta
property="og:site_name"
content="CheckVly"
>
title 작성 시 주의할 점
제목은 페이지의 실제 내용을 정확하게 설명해야 합니다.
검색어를 많이 넣기 위해 같은 단어를 반복하는 방식은 피하는 것이 좋습니다.
좋지 않은 예시는 다음과 같습니다.
<title>
SEO 메타태그 SEO 설정 SEO 최적화 Open Graph SEO
</title>
자연스럽고 명확한 예시는 다음과 같습니다.
<title>
SEO와 SNS 공유를 위한 메타태그 총정리
</title>
검색엔진은 항상 <title> 내용을 그대로 검색 결과에 표시하는 것은 아닙니다.
페이지 본문, 제목 요소, 링크 텍스트, 사이트 구조 등을 참고하여 검색 결과 제목을 다르게 구성할 수도 있습니다.
따라서 <title>은 검색 결과에 강제로 표시할 문구라기보다, 페이지 제목을 검색엔진에 명확하게 전달하는 중요한 신호로 이해하는 것이 좋습니다.
meta description의 역할
메타 설명은 다음과 같이 작성합니다.
<meta
name="description"
content="SEO 기본 메타태그와 Open Graph, Twitter Card 설정 방법을 HTML, Next.js, WordPress 예제로 정리합니다."
>
description은 페이지 내용을 요약하는 설명입니다.
검색엔진은 이 내용을 검색 결과의 설명 문구로 사용할 수 있습니다.
하지만 항상 작성한 문구가 그대로 표시되는 것은 아닙니다.
사용자의 검색어와 더 관련 있는 본문 내용이 있다면 검색엔진이 페이지 본문 일부를 검색 결과 설명으로 표시할 수 있습니다.
description은 검색 순위를 직접 보장하지 않는다
메타 설명에 검색어를 많이 넣는다고 해서 검색 순위가 직접 올라가는 것은 아닙니다.
다음과 같은 방식은 피해야 합니다.
<meta
name="description"
content="SEO SEO 최적화 SEO 설정 메타태그 SEO 검색 노출 SEO 방법"
>
메타 설명의 중요한 역할은 검색 결과에서 페이지의 내용을 잘 설명하고 사용자가 클릭할지 판단하도록 돕는 것입니다.
좋은 메타 설명은 다음 조건을 갖추는 것이 좋습니다.
페이지 내용을 정확하게 요약한다.
다른 페이지와 중복되지 않는다.
핵심 주제를 자연스럽게 포함한다.
과장된 표현을 사용하지 않는다.
본문에 없는 내용을 약속하지 않는다.
예시는 다음과 같습니다.
<meta
name="description"
content="HTML title, canonical, Open Graph와 Twitter Card의 차이와 설정 방법을 Next.js와 WordPress 예제로 설명합니다."
>
홈페이지와 게시물 페이지는 서로 다른 설명을 사용해야 합니다.
홈페이지 예시는 다음과 같습니다.
<meta
name="description"
content="웹 개발, Linux 서버 운영, 데이터베이스와 실무 문제 해결 과정을 기록하는 개발 블로그입니다."
>
게시물 예시는 다음과 같습니다.
<meta
name="description"
content="리눅스 tar 명령어의 압축과 해제, 특정 파일 제외, 권한 보존과 운영 서버 백업 방법을 정리합니다."
>
meta keywords는 사용해야 할까?
과거에는 다음과 같은 태그를 많이 사용했습니다.
<meta
name="keywords"
content="SEO, 메타태그, Open Graph, 검색엔진"
>
현재 일반적인 Google 검색 최적화에서는 meta keywords를 사용할 필요가 없습니다.
키워드는 별도의 메타태그에 나열하기보다 다음 위치에 자연스럽게 포함하는 것이 중요합니다.
페이지 제목
본문 제목
본문 내용
이미지 대체 텍스트
URL
내부 링크
단순히 키워드 태그를 많이 작성한다고 검색 노출에 도움이 되는 것은 아닙니다.
canonical 태그란?
canonical은 동일하거나 매우 비슷한 페이지가 여러 URL로 접근될 때 대표 URL을 알려주는 태그입니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
예를 들어 같은 콘텐츠가 다음 주소로 접근될 수 있다고 가정해 보겠습니다.
https://example.com/posts/meta-tags
https://www.example.com/posts/meta-tags
https://example.com/posts/meta-tags?utm_source=kakao
https://example.com/posts/meta-tags?ref=main
내용은 같지만 URL은 서로 다릅니다.
이때 대표 URL을 다음과 같이 지정할 수 있습니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
canonical은 검색엔진에 다음 의미를 전달합니다.
이 페이지와 비슷한 URL이 여러 개 있더라도
대표 페이지는 이 URL로 판단해 주세요.
canonical 태그를 사용하는 이유
같은 콘텐츠가 여러 URL로 노출되면 검색엔진이 어떤 URL을 대표로 수집해야 할지 판단해야 합니다.
canonical을 사용하면 다음과 같은 상황을 정리하는 데 도움이 됩니다.
www와 non-www 주소 중복
HTTP와 HTTPS 주소 중복
추적 파라미터가 붙은 URL
정렬 또는 필터 파라미터 URL
인쇄용 페이지
동일 콘텐츠의 여러 경로
예를 들어 다음 주소가 있다고 가정합니다.
https://example.com/product/100
https://example.com/product/100?color=black
https://example.com/product/100?utm_source=instagram
페이지 내용이 사실상 같다면 대표 URL을 다음과 같이 지정할 수 있습니다.
<link
rel="canonical"
href="https://example.com/product/100"
>
자기 자신을 가리키는 canonical
대표 페이지 자체에도 자기 자신을 가리키는 canonical을 넣을 수 있습니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
이를 self-referencing canonical이라고 합니다.
워드프레스나 Next.js 같은 시스템에서는 각 게시물에 자기 자신의 정식 URL을 canonical로 출력하는 방식이 일반적입니다.
canonical 작성 시 주의할 점
canonical에는 완전한 절대 URL을 사용하는 것이 좋습니다.
권장 예시는 다음과 같습니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
상대경로 방식은 피하는 것이 좋습니다.
<link
rel="canonical"
href="/posts/meta-tags"
>
canonical URL은 실제로 정상 접근이 가능한 대표 페이지여야 합니다.
다음과 같은 URL을 canonical로 지정하면 안 됩니다.
404 페이지
리디렉션이 반복되는 URL
로그인이 필요한 페이지
noindex가 설정된 페이지
관련 없는 다른 게시물
페이지 A가 페이지 B를 canonical로 지정하고, 페이지 B가 다시 페이지 A를 canonical로 지정하는 것도 피해야 합니다.
페이지 A → 페이지 B
페이지 B → 페이지 A
canonical은 중복 페이지를 무조건 삭제하거나 검색엔진의 선택을 강제하는 명령이 아니라 대표 URL에 대한 강한 힌트입니다.
검색엔진이 페이지 내용과 내부 링크 구조를 검토한 결과 다른 URL을 대표 페이지로 선택할 수도 있습니다.
Open Graph란?
Open Graph는 웹페이지 링크를 SNS와 메신저에 공유할 때 제목, 설명, 이미지 등을 전달하기 위한 메타데이터 규격입니다.
기본 구성은 다음 네 가지입니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:type" content="article">
<meta
property="og:image"
content="https://example.com/images/og-image.jpg"
>
<meta
property="og:url"
content="https://example.com/posts/meta-tags"
>
실제 사용 시에는 설명과 사이트 이름도 함께 넣는 것이 좋습니다.
<meta
property="og:description"
content="페이지 내용을 간단하게 설명하는 문구입니다."
>
<meta
property="og:site_name"
content="CheckVly"
>
<meta property="og:locale" content="ko_KR">
Open Graph 주요 속성
| 속성 | 역할 |
|---|---|
og:title | 공유 미리보기 제목 |
og:description | 공유 미리보기 설명 |
og:type | 콘텐츠 유형 |
og:url | 페이지 대표 URL |
og:image | 공유 대표 이미지 |
og:site_name | 사이트 이름 |
og:locale | 콘텐츠 언어와 지역 |
og:image:width | 이미지 너비 |
og:image:height | 이미지 높이 |
og:image:alt | 이미지 대체 설명 |
예시는 다음과 같습니다.
<meta
property="og:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
<meta
property="og:description"
content="title, canonical, Open Graph와 Twitter Card 설정 방법을 정리합니다."
>
<meta property="og:type" content="article">
<meta
property="og:url"
content="https://example.com/posts/meta-tags"
>
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta
property="og:image:width"
content="1200"
>
<meta
property="og:image:height"
content="630"
>
<meta
property="og:image:alt"
content="SEO와 SNS 공유를 위한 메타태그 구성"
>
<meta property="og:site_name" content="CheckVly">
<meta property="og:locale" content="ko_KR">
og:type 선택 방법
og:type은 페이지의 콘텐츠 유형을 나타냅니다.
대표적으로 다음 값을 사용합니다.
website
article
홈페이지
사이트의 메인 페이지나 일반 소개 페이지에는 website를 사용할 수 있습니다.
<meta property="og:type" content="website">
예시는 다음과 같습니다.
홈페이지
회사 소개
서비스 소개
랜딩 페이지
블로그 게시물
개별 블로그 글이나 기사에는 article을 사용할 수 있습니다.
<meta property="og:type" content="article">
게시물에는 다음 속성을 추가할 수도 있습니다.
<meta
property="article:published_time"
content="2026-08-01T09:00:00+09:00"
>
<meta
property="article:modified_time"
content="2026-08-02T12:30:00+09:00"
>
<meta
property="article:author"
content="https://example.com/about"
>
<meta property="article:section" content="개발">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Open Graph">
날짜는 ISO 8601 형식으로 작성하는 것이 좋습니다.
2026-08-01T09:00:00+09:00
og:url과 canonical의 차이
og:url과 canonical은 대체로 같은 대표 URL을 사용하지만 목적은 다릅니다.
canonical은 검색엔진에 대표 URL을 알려주는 용도입니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
og:url은 SNS 공유 객체의 대표 URL을 지정합니다.
<meta
property="og:url"
content="https://example.com/posts/meta-tags"
>
보통 두 값은 동일하게 설정합니다.
canonical:
https://example.com/posts/meta-tags
og:url:
https://example.com/posts/meta-tags
두 값이 서로 다르면 검색엔진과 SNS가 페이지를 서로 다른 URL로 인식할 수 있으므로 특별한 이유가 없다면 동일하게 맞추는 것이 좋습니다.
Open Graph 이미지는 절대 URL을 사용해야 한다
잘못된 예시는 다음과 같습니다.
<meta
property="og:image"
content="/images/meta-tags-og.jpg"
>
SNS 크롤러가 상대경로를 올바르게 처리하지 못할 수 있으므로 완전한 절대 URL을 사용하는 것이 안전합니다.
권장 예시는 다음과 같습니다.
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg"
>
다음 조건도 확인해야 합니다.
외부에서 로그인 없이 접근 가능해야 한다.
robots.txt나 방화벽으로 차단되어 있지 않아야 한다.
HTTPS 인증서가 정상이어야 한다.
이미지 응답 상태가 200이어야 한다.
HTML 페이지가 아닌 실제 이미지가 반환되어야 한다.
curl로 확인할 수 있습니다.
curl -I https://example.com/images/meta-tags-og.jpg
정상적인 응답 예시는 다음과 같습니다.
HTTP/2 200
content-type: image/jpeg
Open Graph 이미지 권장 크기
일반적으로 많이 사용하는 Open Graph 이미지 크기는 다음과 같습니다.
1200 × 630px
비율은 약 1.91:1입니다.
이 크기는 여러 SNS와 메신저에서 가로형 미리보기 이미지로 사용하기에 무난합니다.
이미지에는 다음 내용을 포함할 수 있습니다.
게시물 핵심 제목
관련 아이콘 또는 일러스트
사이트 로고
카테고리 정보
다만 이미지 가장자리 가까이에 중요한 글자를 배치하면 서비스별 크롭 과정에서 잘릴 수 있습니다.
제목과 로고는 이미지 중앙 영역에 배치하는 것이 안전합니다.
다음 태그를 함께 제공하면 이미지 정보를 더 명확하게 전달할 수 있습니다.
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta
property="og:image:width"
content="1200"
>
<meta
property="og:image:height"
content="630"
>
<meta
property="og:image:type"
content="image/jpeg"
>
<meta
property="og:image:alt"
content="SEO 메타태그 구성 방법"
>
og:image에 캐시 방지 파라미터를 붙여도 될까?
SNS 서비스가 이전 이미지를 계속 표시할 때 이미지 URL을 변경하면 새 이미지로 인식될 수 있습니다.
예시는 다음과 같습니다.
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg?v=2"
>
하지만 매 요청마다 값이 바뀌는 파라미터를 사용하면 캐시가 제대로 작동하지 않을 수 있습니다.
좋지 않은 예시는 다음과 같습니다.
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg?t=현재시간"
>
이미지를 수정했을 때만 버전을 변경하는 방식이 좋습니다.
meta-tags-og-v2.jpg
또는 다음처럼 사용할 수 있습니다.
meta-tags-og.jpg?v=2
Twitter Card란?
Twitter Card는 X에서 링크를 공유할 때 제목, 설명, 이미지를 지정하기 위한 메타태그입니다.
서비스 이름은 X로 변경되었지만 메타태그 이름은 여전히 twitter:* 형식을 사용합니다.
가장 많이 사용하는 설정은 다음과 같습니다.
<meta
name="twitter:card"
content="summary_large_image"
>
<meta
name="twitter:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
<meta
name="twitter:description"
content="title, canonical, Open Graph와 Twitter Card 설정 방법을 정리합니다."
>
<meta
name="twitter:image"
content="https://example.com/images/meta-tags-og.jpg"
>
twitter:card 종류
대표적인 카드 유형은 다음과 같습니다.
summary
summary_large_image
summary
작은 썸네일과 제목, 설명을 표시할 때 사용합니다.
<meta name="twitter:card" content="summary">
summary_large_image
가로형 대형 이미지를 중심으로 보여줄 때 사용합니다.
<meta
name="twitter:card"
content="summary_large_image"
>
블로그 게시물에는 일반적으로 summary_large_image가 잘 어울립니다.
Twitter Card 전체 예제
<meta
name="twitter:card"
content="summary_large_image"
>
<meta
name="twitter:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
<meta
name="twitter:description"
content="검색엔진과 SNS 공유에 필요한 메타태그 설정 방법을 설명합니다."
>
<meta
name="twitter:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta
name="twitter:image:alt"
content="SEO와 SNS 공유 메타태그 구성"
>
사이트나 작성자의 X 계정이 있다면 다음 값을 추가할 수도 있습니다.
<meta
name="twitter:site"
content="@site_account"
>
<meta
name="twitter:creator"
content="@author_account"
>
계정이 없다면 억지로 추가할 필요는 없습니다.
Open Graph와 Twitter Card를 둘 다 작성해야 할까?
두 규격을 함께 작성하는 것이 가장 명확합니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta
property="og:image"
content="https://example.com/images/og.jpg"
>
<meta
name="twitter:card"
content="summary_large_image"
>
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta
name="twitter:image"
content="https://example.com/images/og.jpg"
>
일부 서비스는 Twitter Card가 없으면 Open Graph 정보를 대신 사용할 수 있지만, 각 플랫폼에 전달할 값을 명확하게 제어하려면 둘 다 설정하는 편이 좋습니다.
제목, 설명, 이미지를 동일하게 사용해도 됩니다.
og:title = twitter:title
og:description = twitter:description
og:image = twitter:image
홈페이지 메타태그 전체 예제
홈페이지는 사이트 전체를 설명해야 하므로 og:type을 website로 설정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>
CheckVly | 웹 개발과 서버 운영 실무 기록
</title>
<meta
name="description"
content="웹 개발, Linux 서버 운영, 데이터베이스와 업무 자동화 과정에서 직접 겪은 문제와 해결 방법을 기록합니다."
>
<link
rel="canonical"
href="https://example.com/"
>
<meta property="og:type" content="website">
<meta
property="og:title"
content="CheckVly | 웹 개발과 서버 운영 실무 기록"
>
<meta
property="og:description"
content="웹 개발과 서버 운영 과정에서 직접 겪은 문제와 해결 방법을 기록하는 개발 블로그입니다."
>
<meta
property="og:url"
content="https://example.com/"
>
<meta
property="og:image"
content="https://example.com/images/site-og.jpg"
>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta
property="og:image:alt"
content="CheckVly 개발 블로그"
>
<meta property="og:site_name" content="CheckVly">
<meta property="og:locale" content="ko_KR">
<meta
name="twitter:card"
content="summary_large_image"
>
<meta
name="twitter:title"
content="CheckVly | 웹 개발과 서버 운영 실무 기록"
>
<meta
name="twitter:description"
content="웹 개발과 서버 운영 과정에서 직접 겪은 문제와 해결 방법을 기록합니다."
>
<meta
name="twitter:image"
content="https://example.com/images/site-og.jpg"
>
</head>
<body>
...
</body>
</html>
블로그 게시물 메타태그 전체 예제
개별 게시물에는 article 유형을 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>
SEO와 SNS 공유를 위한 메타태그 총정리 | CheckVly
</title>
<meta
name="description"
content="HTML title, canonical, Open Graph와 Twitter Card의 차이와 설정 방법을 Next.js와 WordPress 예제로 설명합니다."
>
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
<meta property="og:type" content="article">
<meta
property="og:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
<meta
property="og:description"
content="title, canonical, Open Graph와 Twitter Card의 차이와 설정 방법을 정리합니다."
>
<meta
property="og:url"
content="https://example.com/posts/meta-tags"
>
<meta
property="og:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta
property="og:image:alt"
content="SEO와 SNS 공유를 위한 메타태그 구성"
>
<meta property="og:site_name" content="CheckVly">
<meta property="og:locale" content="ko_KR">
<meta
property="article:published_time"
content="2026-08-01T09:00:00+09:00"
>
<meta
property="article:modified_time"
content="2026-08-02T12:30:00+09:00"
>
<meta property="article:section" content="개발">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Open Graph">
<meta
name="twitter:card"
content="summary_large_image"
>
<meta
name="twitter:title"
content="SEO와 SNS 공유를 위한 메타태그 총정리"
>
<meta
name="twitter:description"
content="검색엔진과 SNS 공유에 필요한 메타태그 설정 방법을 설명합니다."
>
<meta
name="twitter:image"
content="https://example.com/images/meta-tags-og.jpg"
>
<meta
name="twitter:image:alt"
content="SEO와 SNS 공유를 위한 메타태그 구성"
>
</head>
<body>
...
</body>
</html>
게시물마다 메타태그를 다르게 설정해야 한다
모든 게시물에 같은 제목, 설명, 이미지가 출력되면 각 페이지의 차이를 제대로 전달할 수 없습니다.
잘못된 구성은 다음과 같습니다.
<title>CheckVly</title>
<meta
name="description"
content="개발 정보를 제공하는 블로그입니다."
>
<meta
property="og:title"
content="CheckVly"
>
<meta
property="og:image"
content="https://example.com/default.jpg"
>
모든 게시물이 동일한 값을 사용하면 공유 미리보기도 모두 같아집니다.
게시물마다 최소한 다음 값은 다르게 생성하는 것이 좋습니다.
title
description
canonical
og:title
og:description
og:url
og:image
twitter:title
twitter:description
twitter:image
Next.js App Router 기본 메타데이터 설정
Next.js App Router에서는 metadata 객체를 사용하여 정적인 메타데이터를 설정할 수 있습니다.
app/layout.tsx 예시는 다음과 같습니다.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'CheckVly',
template: '%s | CheckVly',
},
description:
'웹 개발과 서버 운영 과정에서 직접 겪은 문제와 해결 방법을 기록합니다.',
alternates: {
canonical: '/',
},
openGraph: {
type: 'website',
locale: 'ko_KR',
url: '/',
siteName: 'CheckVly',
title: 'CheckVly',
description:
'웹 개발과 서버 운영 과정에서 직접 겪은 문제와 해결 방법을 기록합니다.',
images: [
{
url: '/images/site-og.jpg',
width: 1200,
height: 630,
alt: 'CheckVly 개발 블로그',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'CheckVly',
description:
'웹 개발과 서버 운영 과정에서 직접 겪은 문제와 해결 방법을 기록합니다.',
images: ['/images/site-og.jpg'],
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>{children}</body>
</html>
);
}
metadataBase를 설정하면 상대경로로 작성한 canonical과 이미지 URL을 절대 URL로 변환할 수 있습니다.
metadataBase: new URL('https://example.com')
다음 값은 최종적으로 절대 URL로 처리됩니다.
alternates: {
canonical: '/posts/meta-tags',
}
images: [
{
url: '/images/meta-tags-og.jpg',
},
]
Next.js 정적 게시물 메타데이터 예제
정적인 페이지라면 page.tsx에서 metadata 객체를 내보낼 수 있습니다.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'SEO와 SNS 공유를 위한 메타태그 총정리',
description:
'HTML title, canonical, Open Graph와 Twitter Card의 차이와 설정 방법을 설명합니다.',
alternates: {
canonical: '/posts/meta-tags',
},
openGraph: {
type: 'article',
url: '/posts/meta-tags',
title: 'SEO와 SNS 공유를 위한 메타태그 총정리',
description:
'title, canonical, Open Graph와 Twitter Card의 차이를 정리합니다.',
publishedTime: '2026-08-01T09:00:00+09:00',
modifiedTime: '2026-08-02T12:30:00+09:00',
section: '개발',
tags: ['SEO', 'Open Graph'],
images: [
{
url: '/images/meta-tags-og.jpg',
width: 1200,
height: 630,
alt: 'SEO와 SNS 공유를 위한 메타태그 구성',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'SEO와 SNS 공유를 위한 메타태그 총정리',
description:
'검색엔진과 SNS 공유에 필요한 메타태그 설정 방법을 설명합니다.',
images: ['/images/meta-tags-og.jpg'],
},
};
export default function Page() {
return (
<main>
<h1>
SEO와 SNS 공유를 위한 메타태그 총정리
</h1>
</main>
);
}
Next.js 동적 게시물 generateMetadata 예제
게시물 데이터에 따라 제목과 설명이 달라진다면 generateMetadata를 사용합니다.
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
interface Post {
slug: string;
title: string;
description: string;
content: string;
imageUrl: string;
imageAlt: string;
publishedAt: string;
modifiedAt: string;
category: string;
tags: string[];
}
interface PageProps {
params: Promise<{
slug: string;
}>;
}
async function getPost(slug: string): Promise<Post | null> {
const response = await fetch(
`https://api.example.com/posts/${encodeURIComponent(slug)}`,
{
next: {
revalidate: 3600,
},
},
);
if (response.status === 404) {
return null;
}
if (!response.ok) {
throw new Error(
`게시물 조회 실패: ${response.status}`,
);
}
return response.json() as Promise<Post>;
}
export async function generateMetadata({
params,
}: PageProps): Promise<Metadata> {
const { slug } = await params;
const post = await getPost(slug);
if (!post) {
return {
title: '게시물을 찾을 수 없습니다',
robots: {
index: false,
follow: false,
},
};
}
const canonicalUrl = `/posts/${post.slug}`;
return {
title: post.title,
description: post.description,
alternates: {
canonical: canonicalUrl,
},
openGraph: {
type: 'article',
url: canonicalUrl,
title: post.title,
description: post.description,
publishedTime: post.publishedAt,
modifiedTime: post.modifiedAt,
section: post.category,
tags: post.tags,
images: [
{
url: post.imageUrl,
width: 1200,
height: 630,
alt: post.imageAlt,
},
],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.description,
images: [post.imageUrl],
},
};
}
export default async function PostPage({
params,
}: PageProps) {
const { slug } = await params;
const post = await getPost(slug);
if (!post) {
notFound();
}
return (
<article>
<h1>{post.title}</h1>
<div>{post.content}</div>
</article>
);
}
metadata 객체와 generateMetadata는 Server Component에서 사용해야 합니다.
다음과 같이 클라이언트 컴포넌트로 선언한 파일에서는 함께 사용할 수 없습니다.
'use client';
export const metadata = {
title: '페이지 제목',
};
페이지 자체에 클라이언트 기능이 필요하다면 메타데이터는 서버 페이지에 두고, 실제 인터랙션 부분만 별도의 Client Component로 분리하는 것이 좋습니다.
Next.js OG 이미지 파일 규칙 사용
Next.js App Router에서는 파일 이름으로 Open Graph 이미지를 지정할 수도 있습니다.
app/
├── layout.tsx
├── page.tsx
├── opengraph-image.jpg
└── twitter-image.jpg
루트 app 디렉터리에 다음 파일을 두면 사이트 기본 공유 이미지로 사용할 수 있습니다.
app/opengraph-image.jpg
app/twitter-image.jpg
특정 게시물 경로에만 다른 이미지를 적용할 수도 있습니다.
app/
└── posts/
└── meta-tags/
├── page.tsx
├── opengraph-image.jpg
└── twitter-image.jpg
이미지 대체 텍스트 파일도 추가할 수 있습니다.
opengraph-image.alt.txt
twitter-image.alt.txt
파일 내용 예시는 다음과 같습니다.
SEO와 SNS 공유를 위한 메타태그 구성
Next.js가 해당 이미지 정보를 기반으로 필요한 메타태그를 자동 생성합니다.
Next.js에서 자주 발생하는 실수
metadataBase 누락
상대경로 이미지를 사용하면서 metadataBase를 설정하지 않으면 URL 처리 과정에서 문제가 발생할 수 있습니다.
images: ['/images/og.jpg']
루트 레이아웃에 다음 설정을 추가합니다.
metadataBase: new URL('https://example.com')
부모 openGraph 설정이 자동 병합될 것이라고 생각하는 경우
하위 페이지에서 openGraph를 다시 정의하면 상위 레이아웃의 관련 설정이 교체될 수 있습니다.
따라서 하위 페이지에서도 필요한 값을 명확히 설정하는 편이 안전합니다.
openGraph: {
type: 'article',
siteName: 'CheckVly',
locale: 'ko_KR',
title: post.title,
description: post.description,
images: [post.imageUrl],
}
클라이언트 컴포넌트에서 metadata 사용
다음 구성은 피해야 합니다.
'use client';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: '제목',
};
메타데이터는 서버 컴포넌트인 layout.tsx 또는 page.tsx에서 설정합니다.
WordPress에서 메타태그 적용하기
WordPress는 테마와 플러그인 구성에 따라 메타태그 출력 방식이 달라집니다.
일반적으로 다음 두 가지 방식이 있습니다.
SEO 플러그인을 사용한다.
테마 또는 커스텀 플러그인에서 직접 출력한다.
대부분의 운영 사이트에서는 SEO 플러그인을 사용하는 방식이 관리하기 쉽습니다.
대표적으로 다음과 같은 플러그인이 사용됩니다.
Yoast SEO
Rank Math
All in One SEO
한 사이트에서 여러 SEO 플러그인을 동시에 활성화하면 동일한 메타태그가 중복 출력될 수 있습니다.
SEO 플러그인은 하나만 사용하는 것이 좋습니다.
WordPress SEO 플러그인으로 설정할 항목
게시물 편집 화면에서 일반적으로 다음 값을 설정할 수 있습니다.
SEO 제목
메타 설명
canonical URL
Facebook 제목
Facebook 설명
Facebook 이미지
Twitter 제목
Twitter 설명
Twitter 이미지
플러그인에 따라 Facebook 항목이 Open Graph 설정을 의미합니다.
게시물별 대표 이미지를 설정하면 해당 이미지가 og:image로 사용될 수 있습니다.
하지만 플러그인마다 우선순위가 다를 수 있습니다.
게시물별 SNS 이미지
대표 이미지
사이트 기본 Open Graph 이미지
플러그인 기본 이미지
설정 후 실제 HTML 출력을 확인해야 합니다.
WordPress 실제 메타태그 확인
브라우저에서 게시물을 연 다음 페이지 소스를 확인합니다.
마우스 오른쪽 버튼
→ 페이지 소스 보기
다음 문자열을 검색합니다.
<title>
description
canonical
og:title
og:image
twitter:card
터미널에서도 확인할 수 있습니다.
curl -s https://example.com/posts/meta-tags |
grep -Ei \
'<title|description|canonical|og:|twitter:'
중복 태그가 있는지 확인합니다.
잘못된 예시는 다음과 같습니다.
<meta
name="description"
content="플러그인에서 만든 설명"
>
<meta
name="description"
content="테마에서 만든 설명"
>
canonical도 하나만 출력되는 것이 좋습니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
다음처럼 여러 개가 출력되면 설정 충돌을 확인해야 합니다.
<link
rel="canonical"
href="https://example.com/posts/meta-tags"
>
<link
rel="canonical"
href="https://example.com/?p=100"
>
WordPress 테마에서 직접 출력하는 방법
SEO 플러그인을 사용하지 않고 직접 구현해야 한다면 wp_head 훅을 사용할 수 있습니다.
다만 테마를 업데이트하면 코드가 사라질 수 있으므로 자식 테마 또는 별도의 커스텀 플러그인에 작성하는 것이 좋습니다.
예시는 다음과 같습니다.
<?php
declare(strict_types=1);
add_action('wp_head', function (): void {
if (!is_singular('post')) {
return;
}
$postId = get_queried_object_id();
if ($postId <= 0) {
return;
}
$title = get_the_title($postId);
$description = get_the_excerpt($postId);
$canonicalUrl = get_permalink($postId);
$imageUrl = get_the_post_thumbnail_url(
$postId,
'full'
);
if ($description === '') {
$content = get_post_field(
'post_content',
$postId
);
$description = wp_trim_words(
wp_strip_all_tags($content),
35,
'...'
);
}
if ($imageUrl === false) {
$imageUrl = get_site_icon_url(512);
}
echo PHP_EOL;
echo '<meta property="og:type" content="article">' .
PHP_EOL;
printf(
'<meta property="og:title" content="%s">' .
PHP_EOL,
esc_attr($title)
);
printf(
'<meta property="og:description" content="%s">' .
PHP_EOL,
esc_attr($description)
);
printf(
'<meta property="og:url" content="%s">' .
PHP_EOL,
esc_url($canonicalUrl)
);
if ($imageUrl !== '') {
printf(
'<meta property="og:image" content="%s">' .
PHP_EOL,
esc_url($imageUrl)
);
}
printf(
'<meta property="og:site_name" content="%s">' .
PHP_EOL,
esc_attr(get_bloginfo('name'))
);
echo '<meta name="twitter:card" ' .
'content="summary_large_image">' .
PHP_EOL;
printf(
'<meta name="twitter:title" content="%s">' .
PHP_EOL,
esc_attr($title)
);
printf(
'<meta name="twitter:description" content="%s">' .
PHP_EOL,
esc_attr($description)
);
if ($imageUrl !== '') {
printf(
'<meta name="twitter:image" content="%s">' .
PHP_EOL,
esc_url($imageUrl)
);
}
}, 20);
이 코드는 예시이며 운영 사이트에서는 다음 사항을 추가로 고려해야 합니다.
SEO 플러그인과 중복 출력 여부
홈페이지와 페이지 유형 처리
카테고리와 태그 아카이브 처리
기본 공유 이미지
다국어 사이트 locale 처리
이미지 크기
canonical 처리
캐시 플러그인
SEO 플러그인을 사용 중이라면 위 코드를 함께 추가하지 않는 것이 좋습니다.
WordPress 대표 이미지 설정
게시물 편집 화면에서 대표 이미지를 설정합니다.
게시물 편집
→ 오른쪽 설정 패널
→ 대표 이미지
→ 이미지 선택
대표 이미지는 가능하면 다음 조건으로 제작합니다.
권장 크기: 1200 × 630px
가로형 이미지
게시물 제목이 잘 보이는 구성
텍스트가 가장자리와 너무 가깝지 않음
파일 용량 최적화
이미지 대체 텍스트도 입력합니다.
SEO와 SNS 공유를 위한 메타태그 설정 방법
대표 이미지가 너무 세로형이거나 작은 경우 SNS에서 확대되거나 잘릴 수 있습니다.
카카오톡 공유 미리보기 확인
카카오톡에 URL을 공유하면 페이지의 Open Graph 메타태그를 기반으로 제목, 설명, 이미지를 구성합니다.
다음 태그를 우선 확인합니다.
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="...">
카카오톡에서 이미지가 나오지 않는다면 다음 항목을 확인합니다.
og:image가 절대 URL인지
이미지가 외부에서 접근 가능한지
HTTPS 인증서가 정상인지
이미지 응답이 200인지
이미지 파일 크기가 지나치게 크지 않은지
방화벽이나 CDN이 크롤러를 차단하는지
이전 정보가 캐시되어 있는지
브라우저 시크릿 모드에서 이미지를 직접 열어 봅니다.
https://example.com/images/meta-tags-og.jpg
로그인 없이 이미지가 보여야 합니다.
카카오톡 캐시 갱신
Open Graph 태그나 대표 이미지를 수정해도 카카오톡에는 이전 정보가 계속 보일 수 있습니다.
이는 카카오가 URL의 공유 정보를 캐시했기 때문일 수 있습니다.
카카오 개발자 도구에서 URL의 캐시 초기화 기능을 사용하여 다시 수집하도록 요청할 수 있습니다.
캐시를 초기화한 뒤에도 바로 반영되지 않을 수 있으므로 다음 항목을 다시 확인합니다.
페이지 HTML에 새 og:title이 출력되는지
새 og:description이 출력되는지
og:image URL이 변경되었는지
새 이미지가 200으로 응답하는지
WordPress 캐시가 삭제되었는지
CDN 캐시가 삭제되었는지
WordPress 캐시 플러그인을 사용 중이라면 게시물 캐시도 삭제합니다.
예시는 다음과 같습니다.
LiteSpeed Cache
WP Rocket
W3 Total Cache
WP Super Cache
CDN을 사용한다면 CDN 캐시도 갱신해야 할 수 있습니다.
페이스북 공유 디버거 확인
페이스북에서 공유 미리보기가 잘못 표시되면 Sharing Debugger를 사용하여 페이지를 다시 수집할 수 있습니다.
디버거에서 URL을 입력하면 다음 정보를 확인할 수 있습니다.
수집된 og:title
수집된 og:description
수집된 og:image
응답 오류
이미지 크기
리디렉션 URL
Open Graph 경고
정보를 수정한 후 다시 스크랩하는 기능을 사용하면 새 메타데이터를 다시 수집하도록 요청할 수 있습니다.
다만 실제 HTML이 변경되지 않았다면 다시 수집해도 같은 정보가 표시됩니다.
먼저 브라우저 소스에서 메타태그가 제대로 출력되는지 확인해야 합니다.
SNS 캐시가 갱신되지 않을 때 점검 순서
다음 순서로 확인합니다.
1. 페이지 소스에서 실제 메타태그 확인
2. canonical과 og:url 확인
3. og:image 절대 URL 확인
4. 이미지 직접 접근 확인
5. 이미지 Content-Type 확인
6. WordPress 페이지 캐시 삭제
7. CDN 캐시 삭제
8. SNS 디버거로 다시 수집
9. 공유할 URL이 정확한지 확인
curl로 메타태그를 확인할 수 있습니다.
curl -L -s \
https://example.com/posts/meta-tags |
grep -Ei \
'og:title|og:description|og:image|og:url|twitter:'
이미지 응답을 확인합니다.
curl -I \
https://example.com/images/meta-tags-og.jpg
리디렉션도 확인합니다.
curl -IL \
http://www.example.com/posts/meta-tags
최종 주소가 canonical과 같은 대표 URL로 이동하는 것이 좋습니다.
JavaScript로 메타태그를 나중에 넣어도 될까?
일부 검색엔진은 JavaScript 실행 후 생성된 메타태그를 처리할 수 있습니다.
하지만 SNS와 메신저 크롤러는 브라우저처럼 JavaScript를 완전히 실행하지 않을 수 있습니다.
따라서 Open Graph와 Twitter Card 태그는 가능한 한 초기 HTML 응답의 <head>에 포함하는 것이 안전합니다.
좋지 않은 예시는 다음과 같습니다.
<script>
const meta = document.createElement('meta');
meta.setAttribute('property', 'og:title');
meta.setAttribute('content', '페이지 제목');
document.head.appendChild(meta);
</script>
서버 렌더링이나 정적 생성 단계에서 미리 출력하는 것이 좋습니다.
Next.js App Router에서는 metadata 또는 generateMetadata를 사용하면 초기 HTML에 필요한 메타태그를 생성할 수 있습니다.
메타태그 적용 후 확인하는 방법
브라우저 개발자 도구의 Elements 탭보다 페이지 소스 보기를 먼저 확인하는 것이 좋습니다.
Elements 탭에는 JavaScript 실행 후 변경된 내용이 표시될 수 있습니다.
실제 서버가 보낸 초기 HTML을 확인하려면 다음 방법을 사용합니다.
마우스 오른쪽 버튼
→ 페이지 소스 보기
또는 curl을 사용합니다.
curl -L -s https://example.com/posts/meta-tags
필요한 태그만 검색합니다.
curl -L -s \
https://example.com/posts/meta-tags |
grep -Ei \
'<title|description|canonical|og:|twitter:'
자주 발생하는 메타태그 오류
title이 모든 페이지에서 동일함
<title>사이트 이름</title>
게시물마다 고유한 제목을 생성해야 합니다.
description이 비어 있음
<meta name="description" content="">
페이지별 요약 내용을 작성합니다.
canonical이 다른 게시물을 가리킴
<link
rel="canonical"
href="https://example.com/wrong-post"
>
현재 게시물의 대표 URL을 지정해야 합니다.
og:image가 상대경로임
<meta
property="og:image"
content="/images/og.jpg"
>
절대 URL을 사용합니다.
<meta
property="og:image"
content="https://example.com/images/og.jpg"
>
HTTP 이미지 사용
<meta
property="og:image"
content="http://example.com/images/og.jpg"
>
페이지가 HTTPS라면 이미지도 HTTPS로 제공하는 것이 좋습니다.
이미지가 로그인 후에만 보임
SNS 크롤러는 로그인할 수 없으므로 공개 이미지 URL을 사용해야 합니다.
메타태그가 body에 있음
잘못된 예시는 다음과 같습니다.
<body>
<meta property="og:title" content="제목">
</body>
메타태그는 <head> 안에 작성합니다.
SEO 플러그인이 여러 개 활성화됨
여러 플러그인이 다음 태그를 중복 출력할 수 있습니다.
description
canonical
og:title
og:image
twitter:card
SEO 플러그인은 하나만 사용하는 것이 좋습니다.
이미지 수정 후에도 이전 이미지가 표시됨
다음 캐시를 확인합니다.
WordPress 페이지 캐시
CDN 캐시
카카오 공유 캐시
페이스북 공유 캐시
브라우저 캐시
이미지 파일명을 변경하는 것도 도움이 될 수 있습니다.
meta-tags-og-v2.jpg
메타태그 최종 체크리스트
[ ] 페이지마다 고유한 title이 있다.
[ ] title이 실제 페이지 내용을 정확히 설명한다.
[ ] 페이지마다 고유한 description이 있다.
[ ] description에 검색어를 반복해서 넣지 않았다.
[ ] canonical이 현재 페이지의 대표 URL을 가리킨다.
[ ] canonical은 절대 URL이다.
[ ] canonical URL이 정상적으로 200 응답을 반환한다.
[ ] 홈페이지 og:type은 website로 설정했다.
[ ] 게시물 og:type은 article로 설정했다.
[ ] og:title과 og:description이 페이지 내용과 일치한다.
[ ] og:url과 canonical이 같은 대표 URL을 사용한다.
[ ] og:image는 HTTPS 절대 URL이다.
[ ] og:image를 로그인 없이 열 수 있다.
[ ] og:image가 실제 이미지 Content-Type을 반환한다.
[ ] Open Graph 이미지 크기가 공유에 적합하다.
[ ] og:image:alt를 설정했다.
[ ] twitter:card를 설정했다.
[ ] Twitter Card 제목, 설명, 이미지를 확인했다.
[ ] 홈페이지와 게시물 메타태그를 구분했다.
[ ] Next.js에서는 metadata 또는 generateMetadata를 사용했다.
[ ] Next.js metadataBase를 설정했다.
[ ] WordPress SEO 플러그인은 하나만 활성화했다.
[ ] 페이지 소스에서 중복 메타태그가 없는지 확인했다.
[ ] 카카오톡 공유 캐시를 확인했다.
[ ] 페이스북 공유 디버거로 수집 결과를 확인했다.
[ ] WordPress와 CDN 캐시를 삭제한 후 다시 테스트했다.
정리
검색엔진용 메타태그와 SNS 공유용 메타태그는 역할이 다릅니다.
<title>과 description은 검색 결과에서 페이지의 제목과 설명을 전달하는 데 사용됩니다.
canonical은 같은 콘텐츠가 여러 URL로 접근될 때 대표 URL을 알려주는 역할을 합니다.
Open Graph는 카카오톡, 페이스북, 디스코드와 같은 서비스에서 공유 미리보기를 구성하는 데 사용됩니다.
Twitter Card는 X에서 링크를 공유할 때 카드 형태의 미리보기를 구성합니다.
블로그 게시물에서는 최소한 다음 항목을 페이지마다 다르게 설정하는 것이 좋습니다.
title
description
canonical
og:title
og:description
og:url
og:image
twitter:title
twitter:description
twitter:image
Next.js App Router에서는 metadata와 generateMetadata를 사용하여 서버 렌더링 단계에서 메타태그를 생성할 수 있습니다.
WordPress에서는 SEO 플러그인을 하나만 사용하고, 게시물별 SEO 제목과 설명, 대표 이미지를 설정하는 방식이 가장 관리하기 쉽습니다.
메타태그를 수정한 뒤에는 브라우저 화면만 확인하지 말고 페이지 소스에서 실제 출력 결과를 확인해야 합니다.
카카오톡이나 페이스북에 이전 이미지가 계속 표시된다면 WordPress와 CDN 캐시를 먼저 삭제하고, 각 서비스의 공유 디버거나 캐시 초기화 기능을 사용하여 다시 수집해야 합니다.
SEO 제목: SEO와 SNS 공유를 위한 메타태그 총정리: Open Graph, Twitter Card
슬러그: seo-open-graph-meta-tags
메타 설명: HTML title, description, canonical, Open Graph와 Twitter Card의 차이와 설정 방법을 정리합니다. Next.js App Router와 WordPress 적용 예제, 카카오톡과 페이스북 공유 캐시 확인 방법도 설명합니다.

