디자인 관점에서 앵커 링크의 스타일을 시각적으로 지정하는 방법에 대한 많은 의견이 있습니다. 오늘은 링크 앵커 텍스트의 이름을 지정하는 방법과 그 이유라는 훨씬 더 중요한 것에 초점을 맞출 것입니다. 충격적인 양의 웹사이트에서 이것을 잘못 이해하고 있습니다. 저도 마찬가지입니다.
웹사이트에서 클릭 가능한 링크를 생성하기 위해 HTML 앵커 태그로 링크 경로를 래핑합니다. <a></a> . 앵커 태그에는 URL(링크 경로) 클래스, ID, 제목 및 앵커 텍스트와 같은 많은 속성이 포함될 수 있습니다.
앵커 텍스트 클릭 가능한을 나타냅니다. 링크의 일부입니다. 앵커 태그를 둘러싸는 것은 링크 URL이 아닌 텍스트입니다.
TechStacker 첫 페이지에 대한 링크입니다. HTML의 모양은 다음과 같습니다.
<a href="https://techstacker.com">TechStacker </a> href=" "안의 URL 링크 대상입니다>TechStacker<대상으로 연결되는 클릭 가능한 앵커 텍스트입니다.
링크에 대한 앵커 텍스트를 작성하는 다음 두 가지 다른 방법을 살펴보십시오. 이 경우 링크 대상은 성능 최적화에 대한 페이지입니다. 첫 번째 앵커 텍스트는 나쁨, 두 번째 앵커 텍스트는 좋음:
첫 번째 앵커 텍스트가 잘못된 이유는 무엇인가요? 첫 번째는 비설명적입니다. 두 번째는 설명적이고 관련성입니다. 연결되는 URL 대상으로 이동합니다.
일부 앵커 텍스트 포인터:
- 앵커 텍스트를 짧게 유지합니다. 특히 앵커 태그가 디자인적으로 크게 강조된 경우 5단어 이상은 레이아웃을 복잡하게 만드는 경우가 많습니다. 상황에 따라 다릅니다.
- 의미 있고 설명적인 앵커 텍스트를 사용합니다. "여기를 클릭하십시오"는 스크린 리더를 사용하는 사람이나 정상적인 시력을 가진 사람을 위한 설명이 아닙니다.
- 앵커 텍스트는 SEO에 영향을 미칩니다. 검색 엔진은 링크하는 콘텐츠와 관련이 있고 설명이 포함된 링크를 원합니다.
- 앵커 텍스트는 접근성에 영향을 줍니다. 스크린 리더가 시각 장애인에게 앵커 텍스트를 읽는 방법을 생각해 보십시오. 앵커 텍스트 설명을 참고하세요.
결론
앵커 텍스트는 SEO와 UX 모두에 영향을 미칩니다. 앵커 텍스트의 이름을 지정하는 방법을 생각하면 독자와 검색 엔진 모두를 만족시킬 것입니다.
이 기사에 대한 조사의 일환으로 Google의 SEO 시작 가이드를 읽었습니다.
내가 방금 한 일을 볼 수 있습니까? 위의 앵커 텍스트는 설명을 포함하고 있으며 이 문서의 컨텍스트와 이 문서가 연결되는 Google SEO 시작 가이드와 관련이 있습니다. 이것이 앵커 텍스트의 이름을 지정하는 방법입니다.
앵커 텍스트는 기대치를 설정해야 합니다. UI 카드가 더 자세한 콘텐츠(기사, 제품 페이지 등)에 대한 미리보기로 작동하는 방식과 유사합니다. 예:Medium의 첫 페이지 또는 여기 TechStacker에 있습니다.
나는 실제로 일반적으로 콘텐츠에 의미 있는 설명을 사용하는 것이 얼마나 중요한지 상기시키기 위해 이 기사를 작성했습니다. , 블로깅이든 코딩이든 식료품 목록이든 상관 없습니다. 모호하지 말고 구체적으로 설명하세요.
디지털 제품 디자이너와 마찬가지로 Luke Wroblewski는 다음과 같이 말합니다.
<블록 인용>분명한 것은 항상 승리합니다.