๋ธ๋ก๊ทธ ๊ด๊ณ ๋ ธ์ถ ๊ด๋ฆฌ HTML ํ๊ทธ ํ์ฉ ๋ฐฉ๋ฒ: ๊ด๊ณ ๋ฐ ๋ณด์กฐ ์ฝํ ์ธ ์ต์ ํ
๋ธ๋ก๊ทธ ๊ด๊ณ ๋ ธ์ถ๊ณผ SEO๋ฅผ ๋์์ ์ก๋ ์ค์ ํ! ์ฌ์ด๋๋ฐ, ์ถ์ฒ ๊ธ, ๋ฐฐ๋ ๊ด๊ณ ๋ฅผ ์๋งจํฑ ํ๊ทธ๋ก ๊ตฌ์กฐํํด ๊ฒ์์์ง ์ต์ ํ์ UX ๊ฐ์ ๊น์ง ๋ฌ์ฑํ๋ ๋ฐฉ๋ฒ์ ์์๋ด ๋๋ค.
๋ธ๋ก๊ทธ๋ ์น์ฌ์ดํธ๋ฅผ ์ด์ํ๋ค ๋ณด๋ฉด, ๊ฒ์์์ง(๊ตฌ๊ธ, ๋ค์ด๋ฒ ๋ฑ)์ ๋ ธ์ถ์ํค๊ณ ์ถ์ง ์์ ์ฝํ ์ธ ๋, ๊ฒ์ ์์์ ์ง์ ์ ์ธ ๊ด๋ จ์ด ์๋ ๋ณด์กฐ ์์ญ์ ์ฒ๋ฆฌํด์ผ ํ ๋๊ฐ ์์ต๋๋ค. ํนํ ๊ด๊ณ ์ฝ๋, ๋ก๊ทธ์ธ ์๋ด, ๊ด๋ จ ๊ธ ์ถ์ฒ ๋ฐ์ค, ํ์ ๋ฐฐ๋ ๋ฑ๊ณผ ๊ฐ์ ์์๋ ๋ธ๋ก๊ทธ ๊ด๊ณ ๋ ธ์ถ ๊ด๋ฆฌ ์ธก๋ฉด์์ ์ฃผ์๊ฐ ํ์ํฉ๋๋ค.
์ค๋์ ๋ถํ์ํ ์ ๋ณด๋ ๊ด๊ณ ๋ฅผ ๊ฒ์์์ง์ ๋ ธ์ถํจ์ผ๋ก์จ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ๋ฅผ ์ดํด๋ณด๊ณ , ์ด๋ฌํ ์ํฉ์ด ์ฝํ ์ธ ๋ถ์๊ณผ ํต์ฌ ๋ฉ์์ง ์ ๋ฌ์ ์ด๋ป๊ฒ ์ํฅ์ ๋ฏธ์น๋์ง ์์๋ณด๊ฒ ์ต๋๋ค.
๊ฒ์์์ง ์ํฅ์ ์ต์ํํ๋ ๋ธ๋ก๊ทธ ๊ด๊ณ /๋ณด์กฐ ์ฝํ ์ธ HTML ํ๊ทธ
์ ์ ํ ๊ด๊ณ ๋ฐฐ์น ์ ๋ต๊ณผ ๋ณด์กฐ ์ฝํ ์ธ ๊ด๋ฆฌ๋ฅผ ํตํด, ํต์ฌ ๋ณธ๋ฌธ๊ณผ ๊ด๊ณ ์์ญ์ ๋ถ๋ฆฌํ๋ฉด ๊ฒ์ ์์์ ๋ฏธ์น๋ ๋ถ์ ์ ์ํฅ์ ์ต์ํํ ์ ์์ต๋๋ค.
์ด๋ด ๋๋ ์๋งจํฑ ํ๊ทธ(Semantic Tag)๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์๋๋ ๊ฒ์์์ง์ด ํน์ ์์ญ์ ํต์ฌ ์ฝํ ์ธ ๊ฐ ์๋ ๋ณด์กฐ ์ฝํ ์ธ ๋ก ์ธ์ํ๋๋ก ๋๋ ํ๊ทธ๋ค์ ๋๋ค.
1. aside: ๊ด๊ณ ๋ฐ ๋ณด์กฐ ์ฝํ ์ธ ๊ตฌ๋ถ
aside ํ๊ทธ๋ ํ์ด์ง ์ฃผ์ ๋ด์ฉ๊ณผ ์ง์ ์ ์ธ ๊ด๋ จ์ฑ์ด ์๋ ์ ๋ณด๋ฅผ ๊ฐ์ธ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๊ด๊ณ , ์ฌ์ด๋๋ฐ ์์ ฏ ๋ฑ์ ์ด ์์ ๋ฃ์ผ๋ฉด ๊ฒ์์์ง์ด ์ด๋ฅผ ํต์ฌ ๋ณธ๋ฌธ๊ณผ ๋ณ๊ฐ๋ก ์ธ์ํฉ๋๋ค.

2. footer: ์ฌ์ดํธ ํ๋จ ์ ๋ณด
์ ์๊ถ ํ๊ธฐ, ์ด์ฉ์ฝ๊ด ๋ฑ ์ฌ์ดํธ์ ๊ธฐ๋ณธ ์ ๋ขฐ๋๋ฅผ ๋์ด๋ ์ ๋ณด๋ฅผ ๋ด์ต๋๋ค. ๊ฒ์์์ง์ ์ด ์์ญ์ ํต์ฌ ์ฝํ ์ธ ๋ก ๋ณด์ง ์์ต๋๋ค.

3. nav: ํ์ ๋ฉ๋ด์ ๋งํฌ ๊ด๋ฆฌ
๊ฒ์์์ง์ด ๋ฉ๋ด๋ฅผ ํ์์ฉ ๋งํฌ๋ก ์ธ์ํ์ฌ ๋ณธ๋ฌธ ํค์๋์ ์ฐ๊ด์ฑ์ด ๋ฎ๋ค๊ณ ํ๋จํ๊ฒ ํฉ๋๋ค.

4. noscript: ์๋ฐ์คํฌ๋ฆฝํธ ๋ฏธ์ง์ ์๋ด
์ฌ์ฉ์ ๊ฒฝํ(UX) ๊ฐ์ ์ ์ํด ์คํฌ๋ฆฝํธ ๋นํ์ฑํ ์ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ํ์ํ๋ ์ฉ๋์ ๋๋ค.

5. aria-hidden="true": ๊ฒ์ ๋ฌด์ ์ฒ๋ฆฌ
๊ฒ์์์ง๊ณผ ์คํฌ๋ฆฐ๋ฆฌ๋๊ฐ ํด๋น ์ฝํ ์ธ ๋ฅผ ์์ ํ ๋ฌด์ํ๊ฒ ๋ง๋ญ๋๋ค. ๊ด๊ณ ์ฝ๋๋ ํธ๋ํน ์ฝ๋์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.

6. role="presentation": ์ฅ์์ฉ ์์
์์ ๋์์ธ ์์๋ฅผ ๊ฒ์์์ง์ด ๋ฌด์ํ๋๋ก ์ฒ๋ฆฌํฉ๋๋ค.

๋ธ๋ก๊ทธ ๊ด๊ณ ๋ฐ ๋ณด์กฐ ์ฝํ ์ธ ์ฉ HTML ํ๊ทธ๋ณ SEO ์ํฅ ์ ๋ฆฌ
| ํ๊ทธ | ์ฃผ์ ์ฉ๋ | SEO ์ํฅ๋ | ๋น๊ณ |
|---|---|---|---|
| aside | ๊ด๊ณ , ๋ณด์กฐ ์ฝํ ์ธ | ๋ฎ์ | ๋ณธ๋ฌธ๊ณผ ๋ฌด๊ดํ ์ ๋ณด ์ฒ๋ฆฌ |
| footer | ์ ์๊ถ, ์ ์ฑ ์๋ด | ๊ฑฐ์ ์์ | ์ฌ์ดํธ ์ ๋ขฐ๋ ๊ฐํ |
| nav | ์ฌ์ดํธ ๋ฉ๋ด | ๋ณดํต | ํ์ ๋งํฌ ์์ธ ๊ฐ๋ฅ |
| aria-hidden="true" | ๋น๊ฒ์ ์ฒ๋ฆฌ | ๋ฌด์๋จ | ๊ด๊ณ ์ฝ๋, ํธ๋ํน์ ์ ํฉ |
| role="presentation" | ์ฅ์ ์์ | ๋ฌด์๋จ | ๋์์ธ ์์ ๊ด๋ฆฌ |
๋ธ๋ก๊ทธ์์ ๊ด๊ณ ๋ ๋ณด์กฐ ์ฝํ ์ธ ๋ฅผ ๊ฒ์์์ง์ ๋ ธ์ถํ์ง ์์ผ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ๋์?
๊ด๊ณ ์ฝ๋, ํ์ ๋ฐฐ๋, ์ฌ์ด๋๋ฐ ์์ ฏ ๋ฑ ๋ณธ๋ฌธ๊ณผ ์ง์ ๊ด๋ จ ์๋ ์ฝํ ์ธ ๋ aside ํ๊ทธ๋ aria-hidden="true" ์์ฑ์ ํ์ฉํด ๊ฒ์์์ง์ด ํต์ฌ ์ฝํ ์ธ ๋ก ์ค์ธํ์ง ์๋๋ก ๋ถ๋ฆฌํด์ผ ํฉ๋๋ค.
๋ธ๋ก๊ทธ ํ๋จ ์ ๋ณด๋ ์ฌ์ดํธ ๋ฉ๋ด๋ SEO์ ์ํฅ์ ์ฃผ๋์?
footer ํ๊ทธ๋ก ์ ์๊ถ, ์ฝ๊ด ๋ฑ์ ๊ตฌ์กฐํํ๋ฉด ์ฌ์ดํธ ์ ๋ขฐ๋๋ฅผ ๋์ผ ์ ์์ผ๋ฉฐ, nav ํ๊ทธ๋ ๋ฉ๋ด ๋งํฌ๋ฅผ ์์ธํ์ง๋ง ๋ณธ๋ฌธ๋งํผ ๋์ ๊ฐ์ค์น๋ฅผ ์ฃผ์ง๋ ์์ต๋๋ค.
๊ด๊ณ ์ ๋ณธ๋ฌธ์ ํจ๊ป ์ด์ํ๋ฉด์ SEO ์ต์ ํ๋ฅผ ๋ฌ์ฑํ๋ ค๋ฉด?
์๋งจํฑ ํ๊ทธ(aside, section, footer)์ ์ ๊ทผ์ฑ ์์ฑ(aria-hidden, role)์ ํ์ฉํด ๊ตฌ์กฐํํ์ธ์. ์ด๋ ๊ฒ ํ๋ฉด ๊ฒ์์์ง์ด ํ์ด์ง๋ฅผ ์ ํํ ํ๊ฐํ์ฌ ๊ฒ์ ์์ ์์น๊ณผ ์์ตํ๋ฅผ ๋์์ ์ก์ ์ ์์ต๋๋ค.
์น ํ๋ก๊ทธ๋๋ฐ