minstudio

메타 데이터(Meta Tags)와 오픈 그래프(Open Graph)

메타 태그는 검색 로봇이 사이트를 분석할 때 가장 먼저 꼼꼼하게 읽어보는 "이력서 요약본"입니다. 또한 사람들이 카카오톡이나 슬랙에 링크 주소만 붙여넣었을 때, 밋밋한 텍스트 대신 예쁜 썸네일과 설명 카드가 생기도록 만드는 마법이 바로 오픈 그래프(Open Graph) 속성입니다.

💬 SNS 공유 시 오픈 그래프(OG)가 렌더링된 모습

개발자 친구 https://minstudio.com/course/123 Minstudio 무료 코딩 과정 코딩 초보 탈출! 웹 개발자 취업을 위한 필수 지침서...

트위터(X)의 경우에는 twitter:card 속성을 추가로 지정해야 큰 썸네일 카드로 렌더링됩니다. 반대로, 관리자 페이지나 검색에 노출되면 안 되는 페이지의 경우 <meta name="robots" content="noindex, nofollow"> 태그를 삽입하여 구글 검색 노출을 완벽하게 차단할 수도 있습니다.

<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>
메타 데이터(Meta Tags)와 오픈 그래프(Open Graph) | Minstudio