728x90
반응형
개발 블로그를 만들었는데 검색에 잘 안 잡힌다면?
혹은 링크를 공유했는데 썸네일이나 설명이 엉뚱하게 나온다면?
이건 바로 SEO와 메타 태그가 빠졌기 때문입니다.
이번 글에서는 Next.js의 next/head 컴포넌트를 활용해서
검색엔진 최적화(SEO)는 물론, Open Graph / Twitter Card 설정까지 완벽히 다뤄볼게요.
🌐 1. next/head란?
Next.js는 기본적으로 각 페이지에서 head 태그를 설정할 수 있도록 next/head 컴포넌트를 제공합니다.
이를 통해 페이지별로 <title>, <meta> 태그 등을 자유롭게 조작할 수 있어요.
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>코드를 걷는 사람 - 개발 블로그</title>
<meta name="description" content="Next.js로 만든 기술 블로그입니다." />
</Head>
<main>...</main>
</>
);
}
📘 2. Open Graph 메타 태그
Open Graph는 페이스북, 카카오톡, 슬랙 등에서
링크를 공유할 때 썸네일/제목/설명을 보여주는 표준 메타태그입니다.
아래와 같이 설정할 수 있어요:
<Head>
<meta property="og:type" content="article" />
<meta property="og:title" content="MDX로 컴포넌트 넣기" />
<meta property="og:description" content="Markdown과 JSX를 조합한 블로그 포스트입니다." />
<meta property="og:image" content="https://yourdomain.com/og-image/mdx.png" />
<meta property="og:url" content="https://yourdomain.com/posts/mdx" />
</Head>
주의: 이미지 링크는 절대경로로 넣어야 SNS에서 정상적으로 불러올 수 있어요.
🐦 3. Twitter Card 메타 태그
트위터에서는 별도의 twitter meta 태그를 지원합니다:
<Head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="MDX로 컴포넌트 넣기" />
<meta name="twitter:description" content="MDX를 사용해 블로그를 확장하는 방법" />
<meta name="twitter:image" content="https://yourdomain.com/og-image/mdx.png" />
</Head>
twitter:card는 일반적으로 summary_large_image를 사용하면 됩니다.
📁 4. 메타 태그 자동화: 동적 페이지에 적용하기
블로그 포스트마다 제목, 설명, 이미지가 다르기 때문에 페이지 단위로 메타 태그를 동적으로 설정해야 합니다.
export default function Post({ postData }) {
return (
<>
<Head>
<title>{postData.title} | 코드를 걷는 사람</title>
<meta name="description" content={postData.excerpt} />
<meta property="og:title" content={postData.title} />
<meta property="og:description" content={postData.excerpt} />
<meta property="og:image" content={postData.image} />
<meta property="og:url" content={`https://yourdomain.com/posts/${postData.slug}`} />
</Head>
<article>...</article>
</>
);
}
SEO에 중요한 요소들:
- 제목은 60자 이내
- 설명은 120~160자 권장
- 이미지는 1200x630 비율
✅ 마무리하며
글은 잘 썼는데 검색이 안 된다면 아무도 못 봐요.
SEO는 바로 그런 상황을 막기 위한 기본 장치입니다.
단 10줄의 메타 태그로 검색 순위, 공유 경험, 블로그 신뢰도가 전부 달라질 수 있어요.
“코드 한 줄이 블로그를 빛나게 한다.”
728x90
반응형
'Next.js' 카테고리의 다른 글
| 댓글 기능 추가하기 — Disqus, GitHub Discussion, 자체 API (6) | 2025.06.27 |
|---|---|
| 마크다운 에디터 연결하기 — CMS 없이 블로그 글 쓰는 워크플로우 만들기 (3) | 2025.06.26 |
| 포스트 목록 만들기 — 최신순, 태그별 필터, 페이징까지 (1) | 2025.06.24 |
| 블로그에 다크모드 적용하기 — next-themes로 UX 높이기 (2) | 2025.06.23 |
| 스타일링 선택하기 — Tailwind CSS vs Styled Components (2) | 2025.06.22 |