웹퍼블리싱 단계에서 단순히 UI 만 구축하고 동적 구현하는 것 뿐만 아니라 제작에 필요한 필수적인 부분을 고민하게 되는데요.
사수가 없는 퍼블리셔에게 웹사이트 제작에 필요한 기본 가이드가 뭘까요? 를 물어보면
그 중 하나로 OG 태그를 말해줄 것 같습니다.
✦ OG(Open Graph) 메타 태그란?
카카오톡, 페이스북, 트위터 등에서 링크를 공유할 때 나타나는 미리보기 화면을 제어하는 핵심 기술.
카카오톡이나 SNS에서 URL을 공유할 때, 썸네일 이미지가 뜨잖아요?
그 미리보기 화면을 동일하게 보여질 수 있도록 해주는 게 메타태그입니다.
사용자가 링크를 SNS에 공유 -> 플랫폼의 크롤러가 해당 웹페이지 방문 -> 추출된 정보로 미리보기 카드가 생성됩니다.
그래서 메타태그를 어디에 넣어야 추출이 되냐? 바로 <head> 태그 입니다
✦ OG 메타 태그 입력 위치
✴️ HTML의 <head> 부분에서 OG 메타 태그 정보 입력
🧩 기본 필수 태그
<!-- 기본 필수 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourwebsite.com/page.html">
<meta property="og:title" content="페이지 제목">
<meta property="og:image" content="https://yourwebsite.com/image.jpg">
<meta property="og:description" content="페이지 설명">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="ko_KR">
- 각 태그의 역할
- og:type: 콘텐츠 유형 (website, article, video 등)
- og:url: 페이지의 정규 URL
- og:title: 공유 시 표시될 제목
- og:image: 썸네일 이미지 URL
- og:description: 페이지에 대한 간단한 설명
- og:site_name: 웹사이트 이름
- og:locale: 언어 및 지역 설정
🧩 이미지 최적화 태그 (옵션)
OG 이미지는 공유 시 가장 눈에 띄는 요소입니다. 효과적인 이미지 설정을 위한 가이드입니다.
필수는 아니구요 하면 좋습니다
<!-- 이미지 최적화 태그 -->
<meta property="og:image" content="https://yourwebsite.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="이미지 설명">
- 권장 이미지 스펙
- 크기: 1200x630 픽셀 (최소 600x315 픽셀)
- 비율: 1.91:1 (페이스북 기준)
- 용량: 5MB 이하
- 형식: JPG, PNG, GIF
🧩 플랫폼별 최적화
SNS(카카오톡 / 블로그 / 트위터 카드) 최적화를 위한 태그입니다.
SNS로 활용되는 태그인 만큼, title과 description을 조금 더 간결하게 축약해서 저는 사용하고 있어요.
[카카오톡 및 네이버 블로그]
<meta property="og:title" content="콘텐츠 제목">
<meta property="og:url" content="https://yourwebsite.com">
<meta property="og:type" content="website">
<meta property="og:image" content="https://yourwebsite.com/image.jpg">
<meta property="og:description" content="콘텐츠 설명">
[트위터 카드]
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="콘텐츠 제목">
<meta name="twitter:description" content="콘텐츠 설명">
<meta name="twitter:image" content="https://yourwebsite.com/image.jpg">
<meta name="twitter:site" content="@twitter_handle">
[모바일 앱 연동] - 앱이 있는 경우 연결할 수 있는 태그
<!-- iOS 앱 -->
<meta property="al:ios:url" content="myapp://content/123">
<meta property="al:ios:app_store_id" content="123456789">
<meta property="al:ios:app_name" content="My App">
<!-- Android 앱 -->
<meta property="al:android:url" content="myapp://content/123">
<meta property="al:android:app_name" content="My App">
<meta property="al:android:package" content="com.example.myapp">
'웹 퍼블리싱 - WEB PUBLISHING' 카테고리의 다른 글
| [Git] Git 파일 원복하기 (git branch / git checkout 활용하기) (0) | 2024.02.26 |
|---|---|
| [CSS] 스크롤바 커스텀 하기 (0) | 2023.07.31 |
| Visual Studio Code 서버 원격 접속 방법 > SFTP로 손쉽게 연결하기 (0) | 2023.07.13 |
| [홈페이지제작기초] 웹 서버 설치 & 서버 원격 연동하기 (0) | 2023.07.13 |
| FTP 사용법 - 파일질라 설치 및 기본 사용법 (0) | 2023.07.13 |
