반응형
메타태그 Robots 속성
- index, follow → 기본 설정 (검색엔진이 페이지와 링크 모두 수집)
- noindex, nofollow → 검색엔진에 노출시키지 않음 (비공개 페이지나 관리자 페이지 등에서 사용)
| 속성 | 의미 | 설명 |
| all | 기본값 | index, follow를 지정한 것과 동일 — 페이지와 링크 모두 수집 대상 |
| none | 비수집 | noindex, nofollow를 지정한 것과 동일 — 페이지와 링크 모두 수집 제외 |
| index | 페이지 수집 허용 | 해당 페이지를 검색엔진이 수집(색인) 대상에 포함 |
| follow | 링크 추적 허용 | 페이지 내의 링크를 따라가며 연결된 페이지도 수집 |
| noindex | 페이지 수집 금지 | 해당 페이지를 검색엔진 색인에서 제외 |
| nofollow | 링크 추적 금지 | 해당 페이지의 링크를 따라가지 않음 (링크 대상 페이지는 수집 안 함) |
<!-- 문서 수집 [ 가능 ] 링크 수집 [ 가능 ] -->
<meta name="robots" content="index,follow" >
<!-- 문서 수집 [ 불가능 ] 링크 수집 [ 가능 ] -->
<meta name="robots" content="noindex,follow" >
<!-- 문서 수집 [ 가능 ] 링크 수집 [ 불가능 ] -->
<meta name="robots" content="index,nofollow" >
<!-- 문서 수집 [ 불가능 ] 링크 수집 [ 불가능 ] -->
<meta name="robots" content="noindex,nofollow" >
| index, follow | ✅ | ✅ | 🔍 노출됨 |
| noindex, follow | ❌ | ✅ | 🚫 노출 안됨 |
| index, nofollow | ✅ | ❌ | 🔍 페이지만 노출 |
| noindex, nofollow | ❌ | ❌ | 🚫 완전 제외 |
검색엔진이 자유롭게 색인 + 링크 탐색 가능
<head>
<meta name="robots" content="index, follow">
<title>홍길동 포트폴리오</title>
</head>
검색결과에 노출되지 않도록 차단
<head>
<meta name="robots" content="noindex, nofollow">
<title>관리자 페이지</title>
</head>
본문은 노출 금지하지만, 내부 링크는 수집 가능하게 설정
<meta name="robots" content="noindex, follow">
네이
<meta name="NaverBot" content="All">
<meta name="NaverBot" content="index,follow">
오픈그래프(OG)는 페이스북·카카오 등 SNS용 미리보기, 트위터 카드는 트위터용 미리보기 설정이며,
사이트의 브랜드·썸네일·설명을 통합 제어하는 SEO·공유 최적화 태그입니다.
오픈그래프 (Open Graph) 메타태그
| 속성 | 설명 | 예시 |
| og:url | 공유할 페이지의 URL (표준 링크) | |
| og:title | 링크 미리보기의 제목 | <meta property="og:title" content="홍길동 포트폴리오"> |
| og:type | 콘텐츠의 타입 (website, article 등) | <meta property="og:type" content="website"> |
| og:image | 미리보기로 표시할 대표 이미지 경로 | |
| og:image:width | 이미지 가로 크기 (선택) | <meta property="og:image:width" content="400"> |
| og:image:height | 이미지 세로 크기 (선택) | <meta property="og:image:height" content="210"> |
| og:description | 콘텐츠의 요약 설명 | <meta property="og:description" content="프론트엔드 개발자 홍길동의 인터랙티브 웹 포트폴리오"> |
트위터 카드 (Twitter Card) 메타태그
| 속성 | 설명 | 예시 |
| twitter:card | 트위터 카드의 유형 지정(summary, summary_large_image 등) | <meta name="twitter:card" content="summary_large_image"> |
| twitter:title | 카드 제목 | <meta name="twitter:title" content="홍길동 포트폴리오"> |
| twitter:description | 카드 설명 | <meta name="twitter:description" content="React, GSAP 기반 인터랙티브 웹 포트폴리오"> |
| twitter:url | 링크 URL | |
| twitter:image | 썸네일 이미지 |
<!-- ========== Open Graph (Facebook, Kakao, Naver 등) ========== -->
<meta property="og:url" content="https://honggildong.dev/">
<meta property="og:title" content="홍길동 포트폴리오">
<meta property="og:type" content="website">
<meta property="og:image" content="https://honggildong.dev/images/og-image.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="210">
<meta property="og:description" content="프론트엔드 개발자 홍길동의 인터랙티브 웹 포트폴리오. React, GSAP, UX Design 기반으로 제작되었습니다.">
<!-- ========== Twitter Card ========== -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="홍길동 포트폴리오">
<meta name="twitter:description" content="React, GSAP, UX Design 기반 인터랙티브 웹사이트">
<meta name="twitter:url" content="https://honggildong.dev/">
<meta name="twitter:image" content="https://honggildong.dev/images/og-image.jpg">
| Open Graph (og:) | og:title, og:image, og:description, og:url | 페이스북, 카카오톡, 네이버 등에서 링크 미리보기를 생성 |
| Twitter Card (twitter:) | twitter:title, twitter:image, twitter:description | 트위터에서 카드형 링크 미리보기를 표시 |
# 파비콘
브라우저의 탭, 주소창, 북마크, 검색결과 등에 표시되는 웹사이트 대표 아이콘입니다.
| 사이트1 | 사이트2 |
<!-- 기본 파비콘 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- PNG 형식 (추천) -->
<link rel="icon" href="/favicon.png" type="image/png">
<!-- Apple (iPhone, iPad용 홈 화면 아이콘) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android & Web App용 -->
<link rel="manifest" href="/site.webmanifest">
<!-- SVG 아이콘 (최신 브라우저용) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
| 파일명/형식 | 용도 | 권장크기 | 비 |
| favicon.ico | 기본 (모든 브라우저 호환) | 16×16 / 32×32px | 최소 16×16 필수 |
| favicon.png | 고해상도, 투명 배경 | 48×48 / 96×96px | 대부분 브라우저 지원 |
| apple-touch-icon.png | iOS 홈 화면 아이콘 | 180×180px | iPhone, iPad용 |
| android-chrome-192x192.png | Android 홈화면 | 192×192px | PWA 앱 지원 |
| favicon.svg | 벡터 아이콘 | 자유 크기 | 최신 브라우저에서 선호 |
| site.webmanifest | PWA 앱 정보 | - | 아이콘, 이름, 색상 정보 포함 |
| Favicon.io | https://favicon.io | - 텍스트, 이미지, 이모지로 파비콘 생성- .ico, .png, .svg 자동 변환 | ✅ 간단하고 빠름✅ 개발자들이 가장 많이 사용 |
| RealFaviconGenerator | https://realfavicongenerator.net | - 모든 기기별 파비콘 세트 자동 생성- manifest.json, Apple, Android, Windows 지원 | 가장 완성도 높은 “전문용” 툴 |
| Favicon Generator (Favicon.cc) | https://www.favicon.cc | - 픽셀 단위 직접 그리기- .ico 파일 다운로드 가능 | 직접 아이콘 그리기 가능 |
| Favicomatic | https://favicomatic.com | - 여러 크기의 PNG → ICO 변환- <link> 태그 자동 생성 | 파비콘 세트 + HTML 코드 자동 생성 |
| ConvertICO | https://convertico.com | - PNG → ICO 단일 변환기 | 단순 변환용으로 빠름 |
<link rel="icon" href="/favicon.ico" type="image/x-icon">반응형
'HTML5' 카테고리의 다른 글
| [ HTML5 ] table , form 요소 (0) | 2024.02.28 |
|---|---|
| [ html5 ] 이미지, 링크 , 엔티티 코드, 동영상 (0) | 2023.08.17 |
| [ html5 ] html작성법, 제목,문단,목록, 유효성검사,시멘틱태 (0) | 2023.08.17 |
| [코딩에디터] 비주얼스튜디오 코드(Visual Studio Code) 설치 , 확장 플러그인(Extension) 설치 방법 (0) | 2023.06.01 |