메타 태그는 검색 로봇이 사이트를 분석할 때 가장 먼저 꼼꼼하게 읽어보는 "이력서 요약본"입니다. 또한 사람들이 카카오톡이나 슬랙에 링크를 붙여넣을 때 생기는 예쁜 썸네일과 설명 카드는 오픈 그래프(Open Graph) 속성이 담당합니다.
💡 핵심 비유
명함과 제품 포장지 내용물이 아무리 좋아도 겉에 적힌 명함과 포장지 썸네일이 예쁘지 않으면 사람들이 클릭해서 열어보지 않는 것과 동일합니다.
🧩 원리 이해하기
<head>
<!-- 1. 기본 메타 태그 (구글/네이버 검색 결과에 노출됨) -->
<title>Minstudio | 실무 웹 퍼블리싱 강좌</title>
<meta name="description" content="기초부터 심화까지! 프론트엔드 개발의 모든 것을 100% 무료로 배웁니다.">
<!-- 2. 오픈 그래프 (Open Graph) - 카톡, 페이스북 공유 시 썸네일 카드 생성 -->
<meta property="og:type" content="website">
<meta property="og:title" content="Minstudio 무료 코딩 강좌">
<meta property="og:description" content="코딩 초보 탈출! 웹 개발자 취업을 위한 필수 지침서">
<meta property="og:image" content="https://example.com/images/thumbnail.jpg">
<meta property="og:url" content="https://example.com">
<!-- 3. 트위터 카드 전용 속성 -->
<meta name="twitter:card" content="summary_large_image">
</head>