웹사이트를 2분 안에 검색 엔진에 등록하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 웹 개발자 및 SEO 기본 지식이 필요한 프론트엔드 개발자 (난이도: 기초)

핵심 요약

• 태그에 메타 태그 추가 → 검색 엔진이 콘텐츠를 이해하게 함
• Open Graph 태그 추가 → 소셜 미디어 공유 시 예쁘게 표시됨
• favicon.ico 파일 추가 → 탭에서 사이트 인지도 향상
• viewport 메타 태그 추가 → 모바일 호환성 개선
• sitemap.xml 생성 → Google 검색 콘솔 등록 시 효과적 SEO 구현

섹션별 세부 요약

1. 메타 태그 추가

• 에 meta name="description" 추가 → 검색 결과 요약문 표시
• meta name="keywords" 추가 → 키워드 기반 검색 최적화
• meta charset="UTF-8" 설정 → 글꼴 호환성 확보

2. Open Graph 태그

• og:title, og:description, og:image 추가 → Discord, Twitter 등에서 공유 시 이미지/제목 표시
• twitter:card 설정 → 트위터 피드에 맞게 표시 형식 결정

3. favicon 생성

• favicon.ico 파일 생성 후 추가
• 없으면 탭에서 사이트 인지도 떨어짐 → 사용자 경험 저하

4. 모바일 호환성

• viewport 메타 태그 추가 → width=device-width, initial-scale=1.0
• 없으면 Google에서 모바일 점수 감점 → 검색 순위 하락

5. sitemap.xml 생성 (Vite 사용 시)

• npm i vite-plugin-sitemap 설치 후 vite.config.js에 import Sitemap from 'vite-plugin-sitemap'; 추가
• plugins: [Sitemap()] 설정 → 자동으로 sitemap.xml 생성

6. Google Search Console 등록

• 도메인 소유권 증명을 위해 Netlify에 Google 제공한 TXT DNS 레코드 추가
• 등록 완료 후 1~2일 소요 → 검색 엔진 크롤링 활성화

결론

• 필수 항목: 메타 태그, favicon, viewport 추가 → 기본 SEO 완성
• 추천 항목: Open Graph 태그, sitemap.xml 생성 → 추가적인 검색 순위 상승
• 도구 추천: Vite 프레임워크 사용 시 vite-plugin-sitemap으로 자동화 가능
• 실무 팁: Netlify 호스팅 시 Google Search Console 등록 시 TXT 레코드 추가 필수