검색엔진은 텍스트 위주로 정보를 수집합니다.
따라서 이미지나 링크 같은 비텍스트 요소도 의미를 부여해줘야 검색엔진이 해당 콘텐츠를 정확하게 해석할 수 있습니다.
특히 alt 속성과 링크 구조 설계는 웹 접근성과 SEO 모두에 영향을 줍니다.
주요 용어 정리
- alt 속성 (Alternative Text)→ 시각장애인을 위한 웹 접근성 필수 요소
- → 검색엔진 이미지 크롤링에도 사용됨
- 이미지가 보이지 않을 때 대체 텍스트를 제공하는 HTML 속성
- 내부 링크 (Internal Link)→ 사이트 구조를 이해시키고 페이지 체류 시간 증가에 기여
- 사이트 내 다른 페이지로 연결되는 링크
- 앵커 텍스트 (Anchor Text)→ "자세히 보기"보단 내용을 명확히 설명하는 문장이 SEO에 효과적
- <a> 태그 안에 표시되는 클릭 가능한 문구
실습 예시 코드
html
복사편집
<img src="cafe-interior.jpg" alt="강남 분위기 좋은 카페 내부 전경">
<a href="/seoul-cafe.html">서울 카페 리뷰 보러가기</a>
- 이미지에는 alt 속성을 포함해 시각 정보도 설명
- 링크에는 앵커텍스트를 활용해 클릭 시 어떤 내용인지 구체적으로 전달
실무 포인트
- 의미 있는 이미지 파일명 사용→ 파일명도 검색엔진이 인식하는 데이터
- → cafe1.jpg ❌ → gangnam-cafe-interior.jpg ✅
- alt 속성은 이미지 내용을 압축 설명→ 키워드도 자연스럽게 포함
- → 예: "강남 분위기 좋은 브런치 카페 실내"
- 앵커텍스트는 구체적인 문장으로 작성→ 클릭 유도와 함께 검색엔진에도 명확한 신호 전달
- → "여기 클릭" ❌ → "서울 카페 리뷰 보러가기" ✅
- 내부 링크는 콘텐츠 흐름에 맞게 배치
- → 관련 주제 페이지와의 연결은 SEO와 UX 모두에 긍정적
alt 속성, 어떻게 작성하고 계신가요? 여러분만의 기준을 공유해 주세요!
'프론트엔드 개발 실무 > 웹사이트 성능 & 최적화 가이드' 카테고리의 다른 글
[실무로 배우는 웹사이트 SEO 최적화 가이드]⑦ 속도 최적화와 웹 성능 향상 (0) | 2025.05.19 |
---|---|
[실무로 배우는 웹사이트 SEO 최적화 가이드]⑥ 모바일 최적화와 반응형 SEO (0) | 2025.05.19 |
[실무로 배우는 웹사이트 SEO 최적화 가이드]④ 키워드 전략 수립과 콘텐츠 최적화 (0) | 2025.05.19 |
[실무로 배우는 웹사이트 SEO 최적화 가이드]③ 메타 태그와 제목, 설명 설정 (0) | 2025.05.19 |
[실무로 배우는 웹사이트 SEO 최적화 가이드]② HTML 시맨틱 태그와 SEO (0) | 2025.05.19 |