01DEFINITION
한 줄로 말하면
가격 비교나 절차 안내를 줄글로만 쓰면 사람도 기계도 항목을 분리하지 못합니다. 표와 목록은 발췌하기 쉬운 형태라 검색결과와 AI 답변에 그대로 옮겨지는 일이 잦습니다. 같은 내용도 담는 그릇에 따라 노출이 달라집니다.
02RISK
없으면 무슨 일이 생기나
가격표를 줄글로 적으면 기계는 그것이 세 개의 상품이라는 사실을 모릅니다. 기본형은 얼마이고 고급형은 얼마이며라는 문장은 사람에게는 표와 같은 정보이지만, 데이터로는 그냥 긴 한 줄입니다. 답변엔진이 요금을 물어온 이용자에게 그 문단을 통째로 보여 줄 수는 없으니 다른 사이트의 표를 씁니다.
절차 안내도 같습니다. 상담 후 진단하고 그다음 시술한다는 문장은 세 단계인데, 목록으로 적지 않으면 단계가 몇 개인지 세어 볼 방법이 없습니다. 순서가 있는 내용은 순서가 드러나는 태그로 적어야 그 순서가 정보가 됩니다.
이 항목은 콘텐츠를 새로 만들라고 하지 않습니다. 이미 있는 문장을 다른 그릇에 옮기는 일이라 대개 한 페이지에 삼십 분이면 끝납니다. 그런데도 오래 방치되는 이유는 화면이 이미 보기 좋기 때문입니다. 디자인으로 줄을 맞춰 표처럼 보이게 해 두면 사람 눈에는 표인데 데이터로는 표가 아닙니다.
표에 담을 내용을 이미지로 만들어 올리는 경우가 특히 아깝습니다. 요금표를 그림 파일 하나로 저장해 붙이면 사람은 볼 수 있지만 기계에게는 아무 글자도 없는 자리가 됩니다. 검색과 답변에서 통째로 빠지고, 화면을 읽어 주는 보조기기 이용자도 그 내용을 못 받습니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
본문 안의 표와 목록 개수를 센다
메뉴와 푸터를 빼고 세는 것이 요령입니다. 우리 판정도 그렇게 셉니다. 메뉴가 목록이라는 이유로 통과시키면 내용은 줄글뿐인 페이지가 전부 통과해 버립니다.
$ curl -s https://example.com | grep -c '<table' 0 $ curl -s https://example.com | grep -c '<ul\|<ol' 4 ← 이 중 몇 개가 메뉴인지 눈으로 확인합니다
-
02
표처럼 보이는 자리가 진짜 표인지 본다
가장 흔한 오해입니다. 격자로 줄을 맞춘 디자인은 화면에서 표와 구별되지 않지만 데이터로는 그냥 상자 여럿입니다. 소스에서 그 자리가 어떤 태그로 돼 있는지 확인하십시오.
가격이 나란히 놓인 자리에서 마우스 우클릭 → 검사 <div class="price-grid"> 이면 표가 아닙니다 <table> 이면 표입니다
-
03
내용의 성격과 그릇이 맞는지 본다
표가 있어도 엉뚱한 것을 담고 있으면 소용이 없습니다. 이 페이지에서 나뉘어야 할 것은 무엇인지, 그것이 나뉜 모양으로 적혀 있는지를 봅니다. 요금과 절차와 비교가 대표적입니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
항목과 값이 짝을 이루는 내용은 표가 맞습니다. 머리행을 반드시 두십시오. 첫 줄이 무엇을 뜻하는지가 데이터로 남습니다.
<table>
<thead><tr><th>구분</th><th>비용</th><th>기간</th></tr></thead>
<tbody>
<tr><td>기본형</td><td>120만원</td><td>3개월</td></tr>
<tr><td>고급형</td><td>180만원</td><td>3개월</td></tr>
</tbody>
</table> 순서가 중요하면 ol, 순서가 없으면 ul 입니다. 이 구분이 사소해 보여도 기계에게는 순서 정보가 있느냐 없느냐의 차이입니다.
<ol> <li>전화 또는 온라인으로 상담을 예약합니다.</li> <li>내원해 엑스레이를 찍고 상태를 확인합니다.</li> <li>비용과 일정을 확정한 뒤 시술을 시작합니다.</li> </ol>
표만 덩그러니 있으면 그것이 무엇의 표인지 알 수 없습니다. 앞에 무엇을 비교한 표인지 한 줄, 뒤에 주의사항이나 기준일을 한 줄 적으십시오. 발췌될 때 그 문장이 같이 따라갑니다.
격자 배치로 표처럼 보이게 해 둔 자리는 태그를 표로 바꾸고 모양은 스타일에서 잡으십시오. 화면은 그대로 두면서 데이터만 생기는 조치입니다.
05FAQ
자주 묻는 질문
표를 쓰면 모바일에서 깨지지 않나요
- 가로로 넘치는 표는 실제로 불편합니다. 다만 그것은 스타일로 푸는 문제입니다. 좁은 화면에서 가로 스크롤이 되게 하거나 항목별로 쌓이도록 바꿀 수 있습니다. 표를 포기하는 대신 표를 반응형으로 만드는 쪽이 맞습니다.
목록이 하나뿐인데 주의로 나왔습니다
- 우리 기준이 둘 이상입니다. 하나는 어느 페이지에나 우연히 있습니다. 관련 링크 목록 같은 것입니다. 의도해서 구조화한 페이지는 대개 둘 이상이 됩니다. 지금 줄글로 적힌 것 중에 나뉘어야 할 것이 하나 더 있는지 보시면 됩니다.
표에 머리행이 꼭 필요한가요
- 필요합니다. 머리행이 없으면 각 칸의 숫자가 무엇을 뜻하는지 알 수 없어서 표의 모양만 남고 정보는 전달되지 않습니다. 120만원이라는 값이 비용인지 기간인지 보증금인지는 머리행이 있어야 정해집니다. 화면에서 굵게 보이는 첫 줄이 아니라 태그로 표시된 머리행이어야 합니다.
모든 내용을 표로 만들면 더 좋은가요
- 아닙니다. 설명과 이야기는 문장이 맞습니다. 표로 만들면 오히려 읽기 어려워지고 인위적으로 보입니다. 나뉘는 것만 나누십시오. 항목과 값이 짝을 이루거나 순서가 있는 내용이 그 대상입니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 39가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.