๋ฐœํ–‰์ผ:

์ˆ˜์ •์ผ:

๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ ์‹œ ์—๋””ํ„ฐ 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 ์†์„ฑ์— ์ด๋ฏธ์ง€์˜ ๋‚ด์šฉ์„ ์„ค๋ช…ํ•˜๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ํฌํ•จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰ ๋…ธ์ถœ์˜ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ html ํ™œ์šฉ๋ฐฉ๋ฒ•

๋˜ํ•œ, br ํƒœ๊ทธ๋กœ ์—ฌ๋ฐฑ์„ ์กฐ์ ˆํ•˜๊ธฐ๋ณด๋‹ค๋Š” CSS์˜ margin์ด๋‚˜ padding ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์›น ํ‘œ์ค€์— ๋ถ€ํ•ฉํ•˜๋ฉฐ, ๊ฒ€์ƒ‰์—”์ง„์— ๋” ๊นจ๋—ํ•œ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

5. ์ž˜๋ชป๋œ ํƒœ๊ทธ ์‚ฌ์šฉ์ด SEO์— ๋ฏธ์น˜๋Š” ์•…์˜ํ–ฅ

์˜๋ฏธ ์—†๋Š” div ํƒœ๊ทธ์˜ ๋‚จ๋ฐœ์ด๋‚˜ ์Šคํƒ€์ผ ์ง€์ •์„ ์œ„ํ•œ ์ž˜๋ชป๋œ ํƒœ๊ทธ ์ค‘์ฒฉ์€ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ ๋Šฆ์ถ”๊ณ  ๋กœ๋ด‡์˜ ํฌ๋กค๋ง์„ ๋ฐฉํ•ดํ•ฉ๋‹ˆ๋‹ค. JavaScript๋กœ br์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค CSS๋กœ ์Šคํƒ€์ผ์„ ์กฐ์ •ํ•˜๋Š” ๊ฒƒ์ด SEO์— ์œ ๋ฆฌํ•จ์„ ๊ธฐ์–ตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ฌ๋ฐ”๋ฅธ ํƒœ๊ทธ ์‚ฌ์šฉ์€ ๊ฒ€์ƒ‰ ๋…ธ์ถœ์„ ๋†’์ด๋Š” ๋ธ”๋กœ๊ทธ ์ตœ์ ํ™”์˜ ๊ธฐ๋ณธ ์ค‘์˜ ๊ธฐ๋ณธ์ž…๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ์‹œ html๋กœ ์ตœ์ ํ™” ํŽœ์œผ๋กœ ๊ธ€์„ ์“ฐ๊ณ  ์žˆ๋Š” ๋ชจ์Šต

Q1: h1 ํƒœ๊ทธ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜๋„ํ‹ฐ๋ฅผ ๋ฐ›๋‚˜์š”?

A1: ์ง์ ‘์ ์ธ ํŽ˜๋„ํ‹ฐ๋ฅผ ์ฃผ์ง€๋Š” ์•Š์ง€๋งŒ, ๋ฌธ์„œ์˜ ์ฃผ์ œ๊ฐ€ ๋ถ„์‚ฐ๋˜์–ด ๊ฒ€์ƒ‰ ๋กœ๋ด‡์ด ํ•ต์‹ฌ ๋‚ด์šฉ์„ ํŒŒ์•…ํ•˜๋Š” ๋ฐ ๋ฐฉํ•ด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๊ฐ€๊ธ‰์  ํ•œ ๋ฒˆ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด SEO์— ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Q2: br ํƒœ๊ทธ๋ฅผ ์•„์˜ˆ ์“ฐ์ง€ ๋ง์•„์•ผ ํ•˜๋‚˜์š”?

A2: ์•„๋‹™๋‹ˆ๋‹ค. ์‹œ์˜ ๊ตฌ์ ˆ์ด๋‚˜ ์ฃผ์†Œ์ฒ˜๋Ÿผ ๋ฌธ๋งฅ์ƒ ๊ฐ•์ œ ์ค„๋ฐ”๊ฟˆ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉํ•ด๋„ ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ๋ฌธ๋‹จ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ๋ฒŒ๋ฆฌ๊ธฐ ์œ„ํ•ด br์„ ์—ฌ๋Ÿฌ ๊ฐœ ๊ฒน์ณ ์“ฐ๋Š” ํ–‰์œ„๋Š” ์ง€์–‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Q3: alt ํƒœ๊ทธ์— ํ‚ค์›Œ๋“œ๋ฅผ ๋งŽ์ด ๋„ฃ์„์ˆ˜๋ก ์ข‹์€๊ฐ€์š”?

A3: ์ง€๋‚˜์นœ ํ‚ค์›Œ๋“œ ๋ฐ˜๋ณต์€ ์ŠคํŒธ์œผ๋กœ ์ธ์‹๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€์˜ ๋‚ด์šฉ์„ ์ •ํ™•ํ•˜๊ฒŒ ๋ฌ˜์‚ฌํ•˜๋ฉด์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ•ต์‹ฌ ํ‚ค์›Œ๋“œ ํ•˜๋‚˜ ์ •๋„๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์Šต๋‹ˆ๋‹ค.

Q4: ํ‹ฐ์Šคํ† ๋ฆฌ ์—๋””ํ„ฐ์˜ '์ธ์šฉ๊ตฌ' ํƒœ๊ทธ๋„ SEO ํšจ๊ณผ๊ฐ€ ์žˆ๋‚˜์š”?

A4: ๋„ค, blockquote ํƒœ๊ทธ๋Š” ์™ธ๋ถ€ ์ •๋ณด๋ฅผ ์ฐธ์กฐํ–ˆ์Œ์„ ๋ช…ํ™•ํžˆ ๋ฐํžˆ๋Š” ์‹œ๋งจํ‹ฑ ์š”์†Œ๋กœ ์ธ์‹๋˜์–ด ๋ฌธ์„œ์˜ ์‹ ๋ขฐ๋„๋ฅผ ๋†’์ด๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

Q5: HTML ํƒœ๊ทธ๋ฅผ ์ž˜ ์“ฐ๋ฉด ๊ฒ€์ƒ‰ ์ˆœ์œ„๊ฐ€ ๋ฐ”๋กœ ์˜ฌ๋ผ๊ฐ€๋‚˜์š”?

A5: ํƒœ๊ทธ ์ตœ์ ํ™”๋Š” ๊ธฐ๋ณธ ์ฒด๋ ฅ์„ ๋‹ค์ง€๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์–‘์งˆ์˜ ์ฝ˜ํ…์ธ ์™€ ์˜ฌ๋ฐ”๋ฅธ HTML ๊ตฌ์กฐ๊ฐ€ ๊ฒฐํ•ฉ๋  ๋•Œ ์žฅ๊ธฐ์ ์œผ๋กœ ์ƒ์œ„ ๋…ธ์ถœ ๊ฐ€๋Šฅ์„ฑ์ด ๊ทน๋Œ€ํ™”๋ฉ๋‹ˆ๋‹ค.