[Nuxt] meta 태그의 name과 property 차이점

웹 페이지를 만들다 보면 <meta> 태그를 자주 보게 됩니다. 특히 Nuxt3나 Vue 기반 프로젝트에서 useHead를 사용할 때 meta 속성 안에 name과 property를 혼용하게 되는 경우가 많죠. 그런데 이 두 개, 정확히 어떤 차이가 있을까요?

오늘은 meta 태그의 name과 property 속성이 어떻게 다르고, 언제 각각을 사용하는 게 맞는지 쉽게 정리해볼게요.

---

✅ meta 태그란?

먼저 간단히 짚고 넘어가자면, <meta> 태그는 HTML 문서의 "메타데이터"를 정의하는 태그예요. 페이지의 설명, 키워드, 작성자, 뷰포트 설정 등 눈에 보이지 않는 중요한 정보를 담고 있어요.

예시:

<meta name="description" content="이 페이지는 정말 유용해요!">

---

🔍 name vs property 차이점

1. name: HTML 표준 메타데이터

• 용도: 일반적인 페이지 정보 설정
• 사용 예: 검색 엔진 최적화(SEO), 뷰포트 설정 등
• 예시:

<meta name="description" content="이 페이지는 정말 유용해요!">
<meta name="keywords" content="nuxt, vue, meta 태그">
<meta name="viewport" content="width=device-width, initial-scale=1">

✅ name은 대부분 브라우저나 검색 엔진이 참고하는 기본 메타 정보입니다.

---

2. property: Open Graph와 같은 외부 스펙을 위한 속성

• 용도: SNS 공유 정보 설정 (Facebook, Kakao, Twitter 등)
• 사용 예: Open Graph (OG), Twitter Card 등 외부 서비스 최적화
• 예시:

<meta property="og:title" content="이 페이지의 소셜 공유 제목">
<meta property="og:description" content="SNS에서 보일 설명입니다.">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com/page">

✅ property는 페이스북, 카카오톡처럼 소셜 미디어가 참고하는 정보를 정의할 때 사용됩니다.

---

💡 Nuxt3에서의 사용 예시

Nuxt3에서는 useHead를 사용해 쉽게 메타 태그를 설정할 수 있어요:

useHead({
  title: '나의 멋진 페이지',
  meta: [
    { name: 'description', content: '이 페이지는 정말 멋져요!' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { property: 'og:title', content: 'SNS 공유용 제목' },
    { property: 'og:image', content: 'https://example.com/og-image.jpg' }
  ]
})

---

🎯 정리하자면

속성목적사용 대상

name	HTML 기본 메타정보 정의	검색 엔진, 브라우저 등
property	외부 플랫폼 정보 (OG 등)	페이스북, 카카오 등

---

마무리

name과 property는 용도가 명확히 다릅니다. SEO와 기본 브라우저 기능을 위해서는 name을, SNS 공유 최적화를 위해서는 property를 사용하면 됩니다. 앞으로 프로젝트에 메타 태그를 추가할 때, 상황에 맞게 선택해서 더 풍부하고 완성도 높은 페이지를 만들어보세요!