디자인 관점에서 앵커 링크를 어떻게 시각적으로 꾸며야 하는지에 대한 의견은 많습니다. 하지만 오늘은 그보다 더 중요한 주제, 바로 링크의 앵커 텍스트를 어떻게 작성해야 하는지, 그리고 그 이유에 대해 살펴보겠습니다. 놀랄 만큼 많은 웹사이트가 이 부분을 잘못 처리하고 있으며, 저 역시 예외는 아니었습니다.
앵커 텍스트란 무엇인가?
웹사이트에서 클릭 가능한 링크를 만들려면 HTML 앵커 태그인 <a></a>로 링크 경로를 감쌉니다. 앵커 태그에는 URL(링크 경로), 클래스(class), id, title 등 다양한 속성이 들어갈 수 있으며, 그중 하나가 바로 앵커 텍스트(anchor text)입니다.
앵커 텍스트란 링크 중 클릭 가능한 부분을 가리킵니다. 즉, 링크 URL이 아니라 앵커 태그로 감싸는 텍스트 자체를 의미합니다.
예를 들어 TechStacker 메인 페이지로 연결되는 링크가 있다고 해보겠습니다. HTML 코드는 다음과 같습니다:
<a href="https://techstacker.com">TechStacker</a>href=" "안의 URL은 링크가 향하는 목적지입니다.>TechStacker<부분이 해당 목적지로 연결되는 클릭 가능한 앵커 텍스트입니다.
아래 두 가지 앵커 텍스트 작성 방식을 비교해 보세요. 링크 목적지는 '성능 최적화'를 다룬 페이지입니다. 첫 번째는 나쁜 예, 두 번째는 좋은 예입니다.
왜 첫 번째 앵커 텍스트는 나쁠까요? 첫 번째는 설명력이 없는 반면, 두 번째는 설명적이면서 링크 목적지와 관련성이 높기 때문입니다.
앵커 텍스트 작성 핵심 포인트
- 앵커 텍스트는 짧게 유지하세요. 5단어를 넘으면 레이아웃이 어수선해질 수 있습니다. 특히 디자인상 강조가 큰 앵커 태그라면 더욱 그렇습니다. 물론 문맥에 따라 유연하게 조절하면 됩니다.
- 의미 있고 설명적인 표현을 사용하세요. "여기를 클릭하세요" 같은 표현은 화면 낭독기를 사용하는 사용자에게도, 일반 시각 사용자에게도 아무런 정보를 주지 못합니다.
- 앵커 텍스트는 SEO에 영향을 줍니다. 검색 엔진은 링크 대상 콘텐츠와 관련성 높은 설명형 앵커 텍스트를 선호합니다.
- 앵커 텍스트는 접근성에도 영향을 줍니다. 화면 낭독기가 시각장애인 사용자에게 어떻게 읽어줄지 상상해 보세요. 그 관점에서 앵커 텍스트를 작성하는 것이 좋습니다.
결론
앵커 텍스트는 SEO와 UX(사용자 경험) 모두에 영향을 미칩니다. 앵커 텍스트 작성에 조금만 신경을 쓰면 독자와 검색 엔진 모두를 만족시킬 수 있습니다.
이 글을 준비하면서 저는 구글의 SEO 스타터 가이드를 참고했습니다.
방금 제가 한 일을 눈치채셨나요? 위 앵커 텍스트는 이 글의 맥락과 링크된 구글 SEO 스타터 가이드 양쪽 모두에 대해 설명적이고 관련성이 높습니다. 바로 이렇게 앵커 텍스트를 작성해야 합니다.
좋은 앵커 텍스트는 기대감을 형성해야 합니다. UI 카드가 더 자세한 콘텐츠(아티클, 제품 페이지 등)의 미리 보기 역할을 하는 것과 같은 원리입니다. Medium의 메인 페이지나 TechStacker의 사례를 참고해 보세요.
솔직히 말씀드리면, 저는 이 글을 통해 스스로에게 상기시키고자 했습니다. 블로그 글쓰기든 코딩이든 심지어 장보기 목록이든, 모든 콘텐츠에 의미 있는 설명을 붙이는 것이 얼마나 중요한지 말입니다. 모호하게 쓰지 말고, 구체적으로 설명하세요.
디지털 프로덕트 디자이너 루크 로블레프스키(Luke Wroblewski)의 말처럼:
"명확함은 언제나 승리한다."