๋ธ๋ก๊ทธ ๊ธ ์์ฑ ์ ์๋ํฐ HTML ํ๊ทธ์ ์ค์์ฑ
SEO ์ฑ๊ณผ๋ ๊ธ์ ๋ด์ฉ๋ฟ ์๋๋ผ HTML ํ๊ทธ ์ฌ์ฉ ๋ฐฉ์์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง๋๋ค. ์ด ๊ธ์ ํตํด ๊ฒ์์์ง์ด ์ ํธํ๋ ํ๊ทธ ๊ตฌ์กฐ์ br ๋จ์ฉ์ ํผํ๋ ์ค์ ๊ธฐ์ค์ ๋ช ํํ ์ ์ ์์ต๋๋ค
1. ์ ๋ธ๋ก๊ทธ ์๋ํฐ์์ HTML ํ๊ทธ๊ฐ ์ค์ํ๊ฐ?
๋ธ๋ก๊ทธ ๊ธ ์์ฑ ์ ๋จ์ํ ํ ์คํธ๋ฅผ ๋์ดํ๋ ๊ฒ๊ณผ ์ฌ๋ฐ๋ฅธ HTML ํ๊ทธ์ ์ ์ ํ ํ์ฉ์ ํ๋ ๊ฒ์ ๊ฒ์ ๊ฒฐ๊ณผ์์ ํฐ ์ฐจ์ด๋ฅผ ๋ง๋ญ๋๋ค. ๊ฒ์์์ง ๋ก๋ด์ ์ฌ๋์ฒ๋ผ ๊ธ์ ์๊ฐ์ ์ผ๋ก ์ฝ๋ ๊ฒ์ด ์๋๋ผ, HTML ์ฝ๋๋ฅผ ๋ถ์ํ์ฌ ๋ฌธ์์ ๊ตฌ์กฐ์ ๋งฅ๋ฝ์ ํ์ ํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ํนํ ์น ์ ๊ทผ์ฑ๊ณผ SEO๋ฅผ ๋์์ ์ก๋ ๋ธ๋ก๊ทธ ๊ธ ์์ฑ ํ๊ทธ ๊ฐ์ด๋๋ฅผ ์ค์ํ๋ฉด ๊ฒ์์์ง์ด ์ฝํ ์ธ ์ ํต์ฌ ์ฃผ์ ๋ฅผ ๋ ๋ช ํํ๊ฒ ์ดํดํ๊ฒ ๋ฉ๋๋ค.
ํจ๊ณผ์ ์ธ SEO ์ต์ ํ๋ฅผ ์ํด์๋ ๋ธ๋ก๊ทธ ๊ธ ์์ฑ ํ๊ทธ๋ฅผ ๋จ์ํ ์ฅ์์ด ์๋, ์ ๋ณด์ ์๊ณ๋ฅผ ๋ํ๋ด๋ ๋๊ตฌ๋ก ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์๋งจํฑ(Semantic) ํ๊ทธ๋ฅผ ์ ์ ํ ์ฌ์ฉํ๋ฉด ํผ์ฒ๋ ์ค๋ํซ(์ถ์ฒ ์ค๋ํซ)์ ๋ ธ์ถ๋ ํ๋ฅ ์ด ๋์์ง๋ฉฐ, ์ด๋ ๊ณง ํธ๋ํฝ ์์น์ผ๋ก ์ด์ด์ง๋๋ค.
2. ๊ฒ์ ์์๋ฅผ ๊ฒฐ์ ํ๋ ํต์ฌ HTML ํ๊ทธ
2.1. ์ ๋ชฉ ํ๊ทธ(Heading Tags)์ ์๊ณ ์ค์
์ ๋ชฉ ํ๊ทธ๋ ๊ตฌ๊ธ ๊ฒ์ ๋ก๋ด์ด ์ ํธํ๋ ์๋งจํฑ HTML ํ๊ทธ ๊ตฌ์กฐ์ ๋ผ๋์ ๋๋ค.
- h1: ํ์ด์ง์ ๋ฉ์ธ ์ฃผ์ (๊ธ ์ ์ฒด์์ ๋จ ํ ๋ฒ๋ง ์ฌ์ฉ ๊ถ์ฅ)
- h2: ์ฃผ์ ์น์ ์ ์์ (๊ฒ์ ๊ฒฐ๊ณผ์ ์์ ๋ชฉ์ผ๋ก ๋ ธ์ถ๋ ํ๋ฅ ๋์)
- h3~h6: ์ธ๋ถ ํ์ ์น์ ๊ตฌ๋ถ
2.2. ๋ฌธ๋จ(p)๊ณผ ์ค๋ฐ๊ฟ(br)์ ์ ๋ต์ ๊ตฌ๋ถ
๋ง์ ์์ฑ์๊ฐ ๊ฐ๋ ์ฑ์ ์ํด br ํ๊ทธ๋ฅผ ๋จ์ฉํ์ง๋ง, ์ด๋ ๊ฐ๋ ์ฑ์ ๋์ด๋ ๋ฌธ๋จ ํ๊ทธ(p)์ ์ค๋ฐ๊ฟ(br)์ ์ฌ๋ฐ๋ฅธ ๊ตฌ๋ถ๋ฒ์ ์ด๊ธ๋ฉ๋๋ค. p ํ๊ทธ๋ ํ๋์ ์์ฑ๋ ์๊ฐ์ ๋ฌถ๋ ๋จ์์ด๋ฉฐ, br์ ๋ฌธ๋งฅ์ ๋จ์ ์์ด ๋จ์ํ ์ค๋ง ๋ฐ๊พธ๋ ์ฉ๋์ ๋๋ค. br ํ๊ทธ๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ๊ฒ์ ๋ก๋ด์ด ๋ฌธ์ฅ์ ํ๋ฆ์ ํ์ ํ๊ธฐ ์ด๋ ค์์ง๋๋ค.
3. ์๊ฐ์ ์์์ ๊ตฌ์กฐ์ ๋ชฉ๋ก์ SEO ํจ๊ณผ
๋ชจ๋ฐ์ผ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ณ ๋ คํ HTML ๋ฆฌ์คํธ(ul/ol) ํ๊ทธ ์ ๋ต์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ธด ์ค๊ธ๋ณด๋ค ๋ชฉ๋ก ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ์ ๋ณด๋ฅผ ๋น ๋ฅด๊ฒ ํ์ด๋ณผ ์ ์์ผ๋ฉฐ, ๊ฒ์์์ง์ ์ด๋ฅผ ํต์ฌ ์์ฝ ์ ๋ณด๋ก ์ธ์ํฉ๋๋ค.
| ํ๊ทธ ์ข ๋ฅ | SEO ์ญํ | ์ฌ์ฉ ๊ถ์ฅ ์ํฉ |
|---|---|---|
| ul / li | ๋์ด๋ ์ ๋ณด์ ๊ตฌ์กฐ์ ํ์ ๋์ | ํน์ง, ์ฅ์ , ์ค๋น๋ฌผ ๋ฑ ์์ ์๋ ๋ชฉ๋ก |
| ol / li | ๋จ๊ณ์ ์ ์ฐจ ์ธ์ ๋ฐ ์ค๋ํซ ๋ ธ์ถ ์ ๋ฆฌ | ๋ฐฉ๋ฒ, ์์, ๋ญํน ๋ฑ ๋ฒํธ๊ฐ ํ์ํ ๋ชฉ๋ก |
| img alt | ์ด๋ฏธ์ง SEO ๋ฐ ์๊ฐ ์ฅ์ ์ธ ์ ๊ทผ์ฑ ํฅ์ | ๋ชจ๋ ์ด๋ฏธ์ง์ ํ์ ์ ์ฉ |
| strong / b | ํต์ฌ ํค์๋ ๊ฐ์กฐ ๋ฐ ๋ก๋ด ์ฃผ๋ชฉ๋ ํฅ์ | ๋ฌธ๋งฅ์ ๊ฐ์ฅ ์ค์ํ ๋จ์ด๋ ๋ฌธ์ฅ |
4. ์ด๋ฏธ์ง ์ต์ ํ: alt ํ๊ทธ์ ์ฌ๋ฐฑ ๊ด๋ฆฌ
๋ธ๋ก๊ทธ ๊ธ์ ์์ฑํ ๋ ์ด๋ฏธ์ง์ ์ญํ ์ ์๊ฐ์ ํฅ๋ฏธ๋ฅผ ๋์ด์ญ๋๋ค. ์ด๋ฏธ์ง SEO๋ฅผ ์ํ alt ํ๊ทธ์ ํผ์ฒ๋ ์ค๋ํซ ์ต์ ํ๋ฅผ ์ํด์๋ alt ์์ฑ์ ์ด๋ฏธ์ง์ ๋ด์ฉ์ ์ค๋ช ํ๋ ํค์๋๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. ์ด๋ ์ด๋ฏธ์ง ๊ฒ์ ๋ ธ์ถ์ ํต์ฌ์ ๋๋ค.

๋ํ, br ํ๊ทธ๋ก ์ฌ๋ฐฑ์ ์กฐ์ ํ๊ธฐ๋ณด๋ค๋ CSS์ margin์ด๋ padding ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์น ํ์ค์ ๋ถํฉํ๋ฉฐ, ๊ฒ์์์ง์ ๋ ๊นจ๋ํ ์ฝ๋๋ฅผ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
5. ์๋ชป๋ ํ๊ทธ ์ฌ์ฉ์ด SEO์ ๋ฏธ์น๋ ์ ์ํฅ
์๋ฏธ ์๋ div ํ๊ทธ์ ๋จ๋ฐ์ด๋ ์คํ์ผ ์ง์ ์ ์ํ ์๋ชป๋ ํ๊ทธ ์ค์ฒฉ์ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋ฆ์ถ๊ณ ๋ก๋ด์ ํฌ๋กค๋ง์ ๋ฐฉํดํฉ๋๋ค. JavaScript๋ก br์ ์ถ๊ฐํ๋ ๊ฒ๋ณด๋ค CSS๋ก ์คํ์ผ์ ์กฐ์ ํ๋ ๊ฒ์ด SEO์ ์ ๋ฆฌํจ์ ๊ธฐ์ตํด์ผ ํฉ๋๋ค. ์ฌ๋ฐ๋ฅธ ํ๊ทธ ์ฌ์ฉ์ ๊ฒ์ ๋ ธ์ถ์ ๋์ด๋ ๋ธ๋ก๊ทธ ์ต์ ํ์ ๊ธฐ๋ณธ ์ค์ ๊ธฐ๋ณธ์ ๋๋ค.

Q1: h1 ํ๊ทธ๋ฅผ ์ฌ๋ฌ ๋ฒ ์ฌ์ฉํ๋ฉด ํ๋ํฐ๋ฅผ ๋ฐ๋์?
A1: ์ง์ ์ ์ธ ํ๋ํฐ๋ฅผ ์ฃผ์ง๋ ์์ง๋ง, ๋ฌธ์์ ์ฃผ์ ๊ฐ ๋ถ์ฐ๋์ด ๊ฒ์ ๋ก๋ด์ด ํต์ฌ ๋ด์ฉ์ ํ์ ํ๋ ๋ฐ ๋ฐฉํด๊ฐ ๋ฉ๋๋ค. ๊ฐ๊ธ์ ํ ๋ฒ๋ง ์ฌ์ฉํ๋ ๊ฒ์ด SEO์ ์ ๋ฆฌํฉ๋๋ค.
Q2: br ํ๊ทธ๋ฅผ ์์ ์ฐ์ง ๋ง์์ผ ํ๋์?
A2: ์๋๋๋ค. ์์ ๊ตฌ์ ์ด๋ ์ฃผ์์ฒ๋ผ ๋ฌธ๋งฅ์ ๊ฐ์ ์ค๋ฐ๊ฟ์ด ํ์ํ ๊ฒฝ์ฐ์๋ ์ฌ์ฉํด๋ ์ข์ต๋๋ค. ๋ค๋ง, ๋ฌธ๋จ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ๋ฒ๋ฆฌ๊ธฐ ์ํด br์ ์ฌ๋ฌ ๊ฐ ๊ฒน์ณ ์ฐ๋ ํ์๋ ์ง์ํด์ผ ํฉ๋๋ค.
Q3: alt ํ๊ทธ์ ํค์๋๋ฅผ ๋ง์ด ๋ฃ์์๋ก ์ข์๊ฐ์?
A3: ์ง๋์น ํค์๋ ๋ฐ๋ณต์ ์คํธ์ผ๋ก ์ธ์๋ ์ ์์ต๋๋ค. ์ด๋ฏธ์ง์ ๋ด์ฉ์ ์ ํํ๊ฒ ๋ฌ์ฌํ๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ ํต์ฌ ํค์๋ ํ๋ ์ ๋๋ฅผ ํฌํจํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.
Q4: ํฐ์คํ ๋ฆฌ ์๋ํฐ์ '์ธ์ฉ๊ตฌ' ํ๊ทธ๋ SEO ํจ๊ณผ๊ฐ ์๋์?
A4: ๋ค, blockquote ํ๊ทธ๋ ์ธ๋ถ ์ ๋ณด๋ฅผ ์ฐธ์กฐํ์์ ๋ช ํํ ๋ฐํ๋ ์๋งจํฑ ์์๋ก ์ธ์๋์ด ๋ฌธ์์ ์ ๋ขฐ๋๋ฅผ ๋์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
Q5: HTML ํ๊ทธ๋ฅผ ์ ์ฐ๋ฉด ๊ฒ์ ์์๊ฐ ๋ฐ๋ก ์ฌ๋ผ๊ฐ๋์?
A5: ํ๊ทธ ์ต์ ํ๋ ๊ธฐ๋ณธ ์ฒด๋ ฅ์ ๋ค์ง๋ ๊ณผ์ ์ ๋๋ค. ์์ง์ ์ฝํ ์ธ ์ ์ฌ๋ฐ๋ฅธ HTML ๊ตฌ์กฐ๊ฐ ๊ฒฐํฉ๋ ๋ ์ฅ๊ธฐ์ ์ผ๋ก ์์ ๋ ธ์ถ ๊ฐ๋ฅ์ฑ์ด ๊ทน๋ํ๋ฉ๋๋ค.