pageservice.tistory.com

프론트엔드 개발 실무/웹사이트 성능 & 최적화 가이드

[실무로 배우는 웹사이트 SEO 최적화 가이드]⑤ 이미지와 링크 최적화

free21 2025. 5. 19. 10:17

검색엔진은 텍스트 위주로 정보를 수집합니다.

따라서 이미지나 링크 같은 비텍스트 요소도 의미를 부여해줘야 검색엔진이 해당 콘텐츠를 정확하게 해석할 수 있습니다.

특히 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 속성, 어떻게 작성하고 계신가요? 여러분만의 기준을 공유해 주세요!

▲ TOP