앵커 링크: HTML과 CMS에서 섹션으로 이동하는 링크를 만드는 방법과 SEO 효과

앵커 링크는 점프 링크 또는 페이지 내 링크라고도 하며, HTML의 가장 오래된 기능 중 하나이자 긴 콘텐츠에서 가장 유용한 기능 중 하나입니다. 독자가 스크롤하지 않고 원하는 답으로 바로 이동할 수 있습니다. Google은 링크를 페이지 간 관계를 보여 주는 핵심 신호로 다루며, 링크 권장사항에서 링크는 href가 있는 실제 a 요소여야 한다고 강조합니다. 이 가이드는 순수 HTML과 주요 CMS에서 앵커 링크를 만드는 방법, SEO와 AI 답변에 주는 효과, 앵커 텍스트와의 관계를 설명합니다.

앵커 링크란 무엇인가요?

앵커 링크는 목적지가 페이지 안의 특정 위치인 하이퍼링크입니다. URL은 해시 기호와 식별자로 끝나며, 이 식별자를 프래그먼트라고 합니다. 예: example.com/guide#step-3. 클릭하면 브라우저가 페이지를 불러오고(또는 그대로 머물고) id가 step-3인 요소까지 스크롤합니다.

흔한 용도는 세 가지입니다.

• 같은 페이지 내 탐색: 글 상단의 목차나 '맨 위로' 링크.
• 다른 페이지에서의 딥 링크: 한 글에서 다른 글의 특정 섹션, 예를 들어 용어집의 정의로 연결.
• 특정 단락 공유: 동료를 질문에 답하는 단락으로 바로 안내.

검색엔진은 example.com/guide와 example.com/guide#step-3을 같은 페이지로 취급합니다. 프래그먼트는 색인할 새 URL을 만들지 않으므로 앵커 링크가 중복 콘텐츠를 일으킬 수 없습니다.

HTML에서 앵커 링크는 어떻게 만드나요?

코드 두 개면 충분합니다. 목적지의 id와 그것을 가리키는 링크입니다.

1. 대상에 id 추가: <h2 id="pricing">요금</h2>. 영문 소문자, 숫자, 하이픈을 사용하고 공백은 넣지 말며, 페이지 안에서 id가 겹치지 않게 합니다.
2. 같은 페이지에서 링크: <a href="#pricing">요금 보기</a>.
3. 다른 페이지에서 링크: <a href="/guide#pricing">가이드의 요금 섹션</a>.
4. 테스트: 링크를 클릭해 제목이 화면 상단에 나타나는지, 고정 헤더 아래에 가려지지 않는지 확인합니다(CSS 속성 scroll-margin-top으로 해결할 수 있습니다).

예전 방식인 <a name="pricing"></a>는 브라우저에서 여전히 작동하지만 HTML5에서는 폐지되었습니다. id는 제목 자체에 붙이세요. 관련 기능인 텍스트 프래그먼트를 쓰면 id 없이도 #:~:text= 구문으로 특정 문장을 강조할 수 있으며, 자세한 내용은 MDN 문서에 있습니다. Google은 일부 추천 스니펫에서 인용한 단락으로 방문자를 스크롤할 때 이 방식을 사용합니다.

WordPress, Shopify, Webflow, Wix에서 앵커 링크는 어떻게 추가하나요?

주요 CMS는 모두 템플릿을 건드리지 않고 id를 설정할 수 있습니다. 항목 이름만 다를 뿐입니다.

CMS가 id를 자동으로 만든다면 확인해 보세요. 제목 전체를 사용하는 경우가 있어 길고 불안정한 프래그먼트가 생기고, 제목을 고치면 링크가 깨집니다.

앵커 링크는 SEO에 도움이 되나요?

앵커 링크는 무엇보다 사용성을 위한 기능입니다. SEO 가치는 간접적이지만 긴 콘텐츠에서는 분명히 있습니다.

• 검색 결과의 '바로가기' 링크: 길고 구조가 잘 잡힌 페이지에서 Google이 결과 아래에 섹션 링크를 보여 주기도 하며, 노출과 클릭이 늘 수 있습니다. 표시 여부는 Google이 결정합니다.
• 단락 식별 향상: id가 있는 명확한 제목은 검색엔진과 AI 어시스턴트가 긴 페이지에서 정확한 답을 찾도록 돕습니다. 추천 스니펫을 얻는 원리와 같습니다.
• 참여도: 목차가 있으면 독자는 다른 곳을 찾아 떠나지 않고 필요한 부분으로 바로 갑니다.
• 접근성: 건너뛰기 링크와 페이지 내 탐색은 키보드와 스크린 리더 사용자를 돕습니다. W3C 접근성 지침에 담긴 원칙입니다.
• 정확한 내부 링크: 다른 글의 #definition을 가리키면 독자를 정확한 단락으로 보내고 내부 링크를 강화합니다.

앵커 링크가 하지 못하는 일도 있습니다. page#section으로 가는 링크는 페이지로 가는 링크로 집계되므로 추가 권위를 전달하지 않으며, 좋은 콘텐츠를 대신하지도 않습니다. Google의 자바스크립트 SEO 기본사항에는 기술적 주의 사항이 직접 나와 있습니다. Googlebot이 그런 URL을 안정적으로 해석하지 못하므로 프래그먼트로 다른 콘텐츠를 불러오지 마세요. 프래그먼트는 이미 페이지에 있는 콘텐츠 안에서 스크롤할 때만 사용하세요.

앵커 링크와 앵커 텍스트의 차이는?

두 용어는 비슷해서 자주 혼동됩니다. 앵커 링크는 링크가 어디로 가는지(섹션)에 관한 것입니다. 앵커 텍스트는 링크가 무엇이라고 말하는지(클릭할 수 있는 단어)에 관한 것입니다. 후자는 용어집의 앵커 텍스트 항목에서 자세히 다룹니다.

앵커 링크와 그 텍스트의 모범 사례는?

모든 앵커 링크에는 앵커 텍스트도 있으므로 두 규칙을 함께 적용합니다.

• 짧고 읽기 쉬운 id: #section-1이나 12단어짜리 프래그먼트 대신 #pricing, #install.
• 설명적인 링크 텍스트: Google은 설명적이고 적당히 간결하며 관련성 있는 텍스트를 권장하고, '여기를 클릭' 같은 일반적인 표현은 피하라고 조언합니다.
• 긴 페이지에는 목차: 약 1500단어를 넘으면 상단에 H2 섹션을 나열하고 각각 id에 연결합니다.
• 질문형 제목: 사용자가 실제로 묻는 질문처럼 쓴 제목은 섹션 링크를 더 유용하고 인용하기 쉽게 만듭니다.
• 바뀌지 않는 id: 다른 페이지나 사이트가 링크하는 id는 게시 후 바꾸지 마세요.
• 구조 점검: 제목 구조 분석 도구로 앵커를 추가하기 전에 H2와 H3 단계가 깔끔한지 확인할 수 있습니다.

피해야 할 실수는?

• 중복된 id: 같은 id를 가진 요소가 두 개면 링크는 첫 번째로만 이동합니다.
• 숨겨진 목적지: 닫힌 탭이나 아코디언 안의 제목에는 링크가 닿지 않을 수 있습니다.
• 제목을 가리는 고정 헤더: CSS에 scroll-margin-top을 추가하세요.
• 프래그먼트 기반 라우팅: #/page 같은 URL로 내용을 바꾸는 싱글 페이지 앱은 Google이 크롤링하기 어렵습니다.
• 과도하게 최적화된 앵커 텍스트: 모든 링크에 같은 완전 일치 키워드를 반복하면 조작처럼 보입니다.

결론

앵커 링크는 #id 프래그먼트로 독자를 페이지의 특정 섹션으로 보냅니다. 제목에 id를 붙이고 링크하면 되며, HTML에서도 CMS 설정에서도 만들 수 있습니다. SEO 효과는 간접적이지만 긴 콘텐츠에서는 구체적입니다. 목차, Google의 섹션 링크 가능성, AI 답변을 위한 더 명확한 단락, 더 정확한 내부 링크를 얻을 수 있으며, 앵커 텍스트가 설명적이어야 한다는 조건이 붙습니다. 글마다 직접 구조를 잡고 싶지 않다면, autopilot 으로 작동하는 저희 SEO·GEO 소프트웨어 Sorank가 질문형 제목과 내부 링크를 갖춘 구조화된 글을 작성해 귀사의 CMS에 게시합니다. AI 블로그 글 생성기를 확인하고 3일 무료 체험으로 테스트해 보세요.