버튼처럼 보이는 이동 요소의 실제 태그 읽기
예약이나 진료 안내로 이동하는 버튼이 검색에 읽히는지는 화면의 사각형 모양이나 색만으로 판단할 수 없습니다. 실제 요소가 목적지 주소를 제공하는 링크인지 소스를 읽어야 합니다. Google은 일반적으로 href 속성을 가진 앵커 요소의 연결을 크롤링할 수 있다고 안내합니다. 버튼이라는 화면 이름과 HTML의 요소 유형을 구별해 구현을 조사하는 질문입니다.
적용 방법으로 개발 자료에서 해당 요소의 태그, href 값, 이벤트 코드를 요청하고 실제 클릭 뒤 도착하는 주소를 비교하는 절차를 제안합니다. 이 자료를 읽기 전에 버튼이 정상 링크라고 추정하지 않습니다. 페이지 이동을 맡는 요소인지 다른 작업을 실행하는 요소인지도 실제 기능으로 판단해야 합니다. 버튼에 붙은 문구만으로 예약 절차의 완료나 진료 제공 여부를 설명하지 않습니다.
href가 없는 앵커 또는 스크립트 이벤트로 링크처럼 작동하는 다른 태그에서는 Google이 안정적으로 주소를 추출할 수 없다고 설명합니다. onclick에서 이동 코드가 실행된다는 사실만으로 권장 링크 형태가 제공된 상태가 되지는 않습니다. 실제 요소의 주소 속성과 실행 코드를 구별해 읽는 방법입니다. 사용자가 눌렀을 때의 결과와 검색로봇에 제공된 연결 자료는 서로 다른 관측입니다.
| 버튼 이름의 자료 | 읽을 요소 유형 | 주소 정보 | 조사할 차이 |
|---|---|---|---|
| 진료 안내의 문구 | 실제 앵커 여부 | href의 도착 문서 | 설명과 목적지의 대응 |
| 예약 화면의 문구 | 이동 요소 또는 다른 제어 | 클릭 후 실제 위치 | 화면 이름과 기능의 차이 |
| 이벤트만 있는 요소 | 다른 태그의 실행 코드 | 코드 안의 이동 값 | 안정적 주소 추출 여부 |
| link 역할의 요소 | 역할 선언과 원래 태그 | 실제로 구현한 목적지 | 선언과 제공 동작의 차이 |
Google의 권장 예에는 href를 가진 앵커에 onclick이나 class가 함께 있는 형태도 포함됩니다. 따라서 이벤트가 붙어 있다는 사실 자체를 링크 추출 실패로 판정하지 않습니다. 주소 속성이 있고 권장 마크업을 사용하는지가 실제 질문입니다. 현재 개발 코드에서 어느 조건이 빠져 있는지 읽은 뒤 수정할 대상을 정할 수 있습니다.
href의 값은 크롤러가 요청할 수 있는 실제 웹 주소로 해석돼야 한다는 설명도 있습니다. 앵커 요소가 존재해도 주소가 다음 페이지의 자료를 제공하는 값인지 읽어야 합니다. 개발 자료의 문자열과 최종 도착 화면을 함께 비교하는 방법으로 적용합니다. 클릭 효과를 실행하는 코드와 실제 문서를 요청할 주소를 같은 값처럼 취급하지 않습니다.
입력 코드와 공개 렌더 결과를 나누어 시험하기
버튼으로 표시할 링크의 실제 코드를 읽는 단계에서는 처음 받은 HTML과 스크립트 실행 뒤의 자료를 구별합니다. Google은 JavaScript로 동적으로 들어간 링크라도 권장 HTML 형태를 사용하면 크롤링할 수 있다고 설명합니다. 동적이라는 이유만으로 연결을 제외하거나 정적이라는 이유만으로 정상이라고 답하지 않습니다. 실제 생성된 요소와 목적지 값을 읽는 기술 조건입니다.
병원 페이지에 적용하는 시험 방법으로 원래 코드에 들어간 이름·태그·주소를 공개 결과의 동일 요소와 대조할 수 있습니다. 스크립트가 요소를 만드는 경우에는 최종 결과에서 그 요소가 존재하는지 읽습니다. 표시된 위치가 이동했거나 문구가 달라졌다면 어떤 자료가 실제 사용자에게 제공되는지 조사합니다. 구현을 실행하지 않은 상태를 시험 완료로 표현하지 않습니다.
| 시험할 자료 | 읽을 실제 값 | 수정 조사 질문 | 결과의 범위 |
|---|---|---|---|
| 초기 HTML | 태그와 주소 속성 | 앵커가 제공되는가 | 최초 전달 코드 |
| 실행 후 HTML | 생성된 연결의 값 | 실제 목적지가 남는가 | 렌더링된 요소 |
| 버튼의 문구 | 전달된 앵커 텍스트 | 해당 글자가 존재하는가 | 독자에게 보인 설명 |
| 선택 후 위치 | 실제 도착 주소 | 표시한 안내로 가는가 | 현재 구현의 이동 |
Google은 스크립트로 삽입한 앵커 문구가 URL 검사 도구의 렌더링된 HTML에 있는지 읽도록 안내합니다. 코드의 입력값만 존재하고 실제 문구가 전달되지 않는 상태인지 조사하는 질문입니다. 주소 추출 문제와 문구 누락은 다른 수정 대상이므로 실제 읽은 결과에 따라 구별할 수 있습니다. 버튼 이미지나 색의 표시만으로 텍스트의 존재를 판단하지 않습니다.
목적지 이름은 현재 페이지와 연결되는 페이지에 관련돼야 하며 구체적이고 간결해야 한다는 Google의 설명을 적용합니다. 버튼이 ‘예약’이라는 표현을 사용하면 실제로 어느 안내나 화면을 여는지 그 도착 자료를 읽을 수 있습니다. 행동 문구가 전하는 기대와 공개된 자료의 범위가 맞는지 대조하는 편집 질문입니다. 실제 예약 가능성이나 환자 행동을 임의로 예측하지 않습니다.
앵커만 따로 읽었을 때 무엇을 제공하는지 구체적인 정보를 얻을 수 있는지 시험하라는 조언도 있습니다. ‘여기를 클릭’처럼 목적지를 알기 어려운 표현은 Google이 좋지 않은 예로 제시합니다. 버튼이 다른 설명과 떨어져 배치돼 있을 때 그 이름이 어떤 자료를 뜻하는지 읽는 질문에 적용할 수 있습니다. 문구를 길게 늘리기 전에 필요한 대상이 무엇인지 판단합니다.
앵커에 목적지와 관련된 모든 키워드를 넣지 말고 자연스럽게 쓰라는 원칙입니다. 다음 문서를 이해하는 데 그 표현이 필요한지를 기준으로 읽을 수 있습니다. 버튼이 좁다는 이유로 정보가 사라졌는지와 검색어를 반복해서 문구가 불필요하게 길어졌는지는 별개의 편집 문제입니다. 현재 제공하는 자료의 이름과 선택 행동을 분명히 하는 범위에서 표현을 정합니다.
링크 역할의 선언과 실제 브라우저 동작 구별
W3C의 Link Pattern은 링크를 리소스에 대한 상호작용 참조로 설명합니다. 대상은 현재 페이지나 앱의 안 또는 밖에 있을 수 있습니다. 따라서 다른 문서를 여는 기능과 현재 페이지의 특정 자료로 이동하는 기능을 실제 목적지에 따라 읽을 수 있습니다. 버튼 외형이라는 공통 표시만으로 모든 요소가 같은 종류의 행동을 맡는다고 정하지 않습니다.
원문은 href를 가진 HTML 앵커 같은 기본 언어의 링크 요소를 쓰는 것을 강하게 권장합니다. 링크 역할을 다른 요소에 붙인다고 브라우저가 표준 동작을 자동으로 제공하지는 않는다는 설명이 이어집니다. 개발 자료에서 role 값만 읽고 구현이 끝났다고 답하지 않아야 하는 이유입니다. 태그 자체가 제공하는 동작과 추가로 구현한 행동을 각각 조사할 수 있습니다.
W3C는 role이 link인 요소를 사용할 때 목적지 이동과 컨텍스트 메뉴 같은 기능을 제공할 책임이 작성자에게 있다고 명시합니다. 이동은 되지만 다른 표준 링크 행동이 빠져 있는 상태인지 시험하는 질문입니다. 특정 병원의 개발 담당자가 이미 그 기능을 구현했다고 가정하지 않습니다. 실제 코드를 요청하고 현재 실행 결과를 읽는 범위입니다.
키보드 상호작용 설명에서는 Enter로 링크를 실행해 대상 위치로 초점을 이동한다고 안내합니다. 포인터로 누르는 결과와 키보드로 선택한 결과를 대조하는 시험 방법에 적용할 수 있습니다. 현재 요소의 이동 대상과 초점 위치가 실제 어떤 값인지 읽습니다. 한 방식으로 이동한 사실만으로 다른 입력 방식의 동작까지 완료됐다고 기록하지 않습니다.
W3C가 제시한 역할 조건은 링크 텍스트나 그림을 담은 요소에 link 역할이 있다는 설명입니다. 화면의 문구를 담은 요소가 무엇인지와 역할이 어느 요소에 부여됐는지 실제 소스에서 대조할 수 있습니다. 시각적으로 같은 버튼처럼 보여도 요소 구성이 다를 수 있기 때문입니다. 이 역할 선언이 Google의 주소 추출 조건을 대체하는 값은 아닙니다.
Google의 문맥 안내는 링크 앞뒤의 단어도 중요하며 연결을 연달아 붙이지 말라고 설명합니다. 여러 이동 버튼을 같은 문장 안에 이어 넣는 경우 어떤 설명이 각 대상에 해당하는지 읽는 편집 질문입니다. 정해진 버튼 개수를 만들기보다 각각의 목적지를 구별할 내용이 남는지 판단합니다. 여러 개의 연결에서 주변 문맥이 없어지는 문제와 태그의 기술 문제는 따로 조사할 수 있습니다.
현재 페이지를 이해하는 데 도움 되는 사이트 내부의 다른 자료를 맥락에 따라 연결하라는 Google의 원칙도 적용할 수 있습니다. 버튼의 도착 안내가 지금 읽는 설명을 보충하는지 실제 내용으로 판단하는 질문입니다. 검색에서 읽을 수 있는 태그가 제공됐다는 상태만으로 목적지의 내용까지 적합하다고 확정하지 않습니다. 연결 구현과 연결할 자료의 관계를 모두 읽는 범위입니다.
이동 요소 시험 뒤 이어지는 질문
링크의 컨텍스트 메뉴를 여는 키도 있나요?
W3C는 Shift와 F10 조합으로 컨텍스트 메뉴를 여는 동작을 선택사항으로 설명합니다. 선택사항을 모든 구현의 필수 동작으로 확대하지 않습니다.
텍스트가 없는 앵커는 이름을 어떻게 전달하나요?
Google은 빈 앵커의 title 속성을 대신 사용할 수 있다고 안내합니다. 실제 속성이 있는지 읽되 모든 독자가 빈 연결을 이해한다는 판정과 구별합니다.
그림으로 표시한 연결은 어떤 텍스트를 쓰나요?
Google은 이미지 링크의 alt를 앵커로 사용한다고 설명합니다. 그림의 링크도 실제 목적지와 대체 설명이 대응하는지 읽을 수 있습니다.
버튼 수를 늘리면 중요한 문서가 자동 발견되나요?
Google은 중요한 문서에 사이트 안의 다른 페이지에서 하나 이상의 링크가 있어야 한다고 안내합니다. 개수 자체의 증가보다 실제 공개 연결이 그 문서에 도달하는지 읽습니다.
다른 요소로 만든 링크의 예도 제공되나요?
W3C는 span과 img로 구성한 링크 위젯의 예를 안내합니다. 예의 존재를 같은 요소에 역할만 붙이면 표준 링크의 모든 행동이 생긴다는 의미로 읽지 않습니다.