๋ธ๋ก๊ทธ ์๋ํฐ ์๋ชป๋ ์ฌ์ฉ๋ฒ๊ณผ SEO ํฅ์์ ์ํ ์ฌ์ฉ๋ฐฉ๋ฒ
๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๋ฉด์ ๋ง์ ๋ถ๋ค์ด ์ฌ์ฉํ๋ ๋ธ๋ก๊ทธ ์๋ํฐ๋ ์ง๊ด์ ์ด๊ณ ํธ๋ฆฌํ์ง๋ง, ์๋ชป ์ฌ์ฉํ๋ฉด SEO(๊ฒ์์์ง ์ต์ ํ)์ ์ ์ํฅ์ ์ค ์ ์๋ค๋ ์ฌ์ค, ์๊ณ ๊ณ์ จ๋์?
ํนํ ์๋ํฐ์์ ์๋์ผ๋ก ์์ฑ๋๋ ๋ถํ์ํ ์ฝ๋๋ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋ฆ์ถ๊ณ , ๊ฒ์์์ง์ด ์ฝํ ์ธ ์ ํต์ฌ์ ์ ๋๋ก ์ดํดํ์ง ๋ชปํ๊ฒ ๋ง๋ค์ด SEO์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ผ์น ์ ์์ต๋๋ค. ์ด๋ฒ ๊ธ์์๋ ๋ธ๋ก๊ทธ ์๋ํฐ ์ต์ ํ ์ฌ์ฉ๋ฒ๊ณผ ํจ๊ป SEO๋ฅผ ํฅ์์ํค๋ ๋ธ๋ก๊ทธ ์๋คํฐ ์ฌ์ฉ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค.
๊ฒ์์์ง์ด ์ซ์ดํ๋ ๋ถํ์ํ ์ฝ๋, ์๋ํฐ์์ ์ค์ด๋ ๋ฒ
ํนํ ๊ฒ์์์ง(๊ธฐ๊ณ)์ ๊ธ์ ๊พธ๋ฐ๋ณด๋ค ๋ด์ฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ์ค์ํฉ๋๋ค. ๊พธ๋ฐ ์์๋ ์ฌ์ฉ์(์ธ๊ฐ)๋ฅผ ์ํ ๊ฒ์ผ๋ก, CSS๋ก ์ฒ๋ฆฌํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ด์์ ์ธ ๋ฐฉ์์ ๋๋ค.
๋ธ๋ก๊ทธ ์๋ํฐ ์ฌ์ฉ ์ ํํ ๋ฐ์ํ๋ ๋ฌธ์ ์
๋ธ๋ก๊ทธ ํ๋ซํผ(์: Tistory, ๋ค์ด๋ฒ, ์๋ํ๋ ์ค ๋ฑ)์์ ์ ๊ณตํ๋ ์๋ํฐ๋ ํธ๋ฆฌํ ๋๊ตฌ์ ๋๋ค. ํ์ง๋ง ๋ค์๊ณผ ๊ฐ์ ์๋ ์ฝ์ ์ฝ๋๊ฐ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค.
๋๋ถ๋ถ์ ๋ธ๋ก๊ทธ ์๋ํฐ๋ ๊ธ์ ์์ฑํ ๋ ์๋์ผ๋ก div, span, font; ๋ฑ๊ณผ ๊ฐ์ ๋ถํ์ํ ํ๊ทธ๋ฅผ ์ฝ์ ํฉ๋๋ค. ์ด๋ฌํ ํ๊ทธ๋ ๋ณด๊ธฐ์๋ ํ๋ คํ ์ ์์ง๋ง, ์ค์ ๋ก๋ ๊ฒ์์์ง์ด ์ฝํ ์ธ ๋ฅผ ์ ๋๋ก ์ฝ๊ณ ์ดํดํ๋ ๋ฐ ๋ฐฉํด๊ฐ ๋ ์ ์์ต๋๋ค.
- div,span,font ๋ฑ์ ๋ถํ์ํ HTML ํ๊ทธ
- ๊ตฌ์กฐ๊ฐ ๋ถ๋ช ํํ ์ค์ฒฉ๋ ํ๊ทธ
- ์๋ฏธ ์๋ ํด๋์ค๋ช ๋๋ ์ธ๋ผ์ธ ์คํ์ผ
๋ํ์ ์ธ ๋ฌธ์ ์
- ์ฝํ ์ธ ์ ๋ถํ์ํ HTML ํ๊ทธ๊ฐ ๊ณผ๋ํ๊ฒ ๋ง์์ ธ ํ์ด์ง ์ฉ๋ ์ฆ๊ฐ
- ๋ชจ๋ฐ์ผ ์ฌ์ฉ์ ๊ฒฝํ ์ ํ ๊ฒ์ ์์ ํ๋ฝ
- ์ฝํ ์ธ ์ ๋ ผ๋ฆฌ์ ๊ตฌ์กฐ๊ฐ ์๊ณก๋จ
- ์ค๋ณต ํ๊ทธ๋ก ์ธํ ํค์๋ ๋น์ค ์๊ณก
์ด๋ฌํ ์์๋ค์ ์ฝํ ์ธ ์ ํต์ฌ ์ ๋ณด ์ ๋ฌ์ ๋ฐฉํดํ๊ณ , ๊ฒ์๋ก๋ด์ด ์ฝํ ์ธ ๊ตฌ์กฐ๋ฅผ ํ์ ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ญ๋๋ค.
๋ถํ์ํ ์ฝ๋๊ฐ SEO์ ๋ฏธ์น๋ ์ํฅ
๊ณผ๋ํ HTML ํ๊ทธ | ํฌ๋กค๋ฌ ํผ๋, ์ฝํ ์ธ ํ๊ฐ ํ๋ฝ |
๋๋ฆฐ ๋ก๋ฉ ์๋ | ํ์ด์ง ์ดํ๋ฅ ์ฆ๊ฐ, ๋ญํน ์ ํ |
์ค๋ณต ํ๊ทธ ๊ตฌ์กฐ | ์ฝํ ์ธ ํ์ง ์ ์ ํ๋ฝ |
๋นํ์ค ์ฝ๋ | ๋ชจ๋ฐ์ผ ์ฌ์ฉ์ ๊ฒฝํ ์ ํ |
๊ฒ์์์ง์ ์ ๋๋ HTML ๊ตฌ์กฐ์ ๋ช ํํ ์ฝํ ์ธ ์๊ณ๋ฅผ ์ ํธํฉ๋๋ค. ๋ถํ์ํ ์ฝ๋๊ฐ ๋ง์ผ๋ฉด ์ฝํ ์ธ ์ ์ง์ง ๊ฐ์น๊ฐ ๋ฌปํ๊ฒ ๋๊ณ , ์ด๋ ๊ฒ์ ๋ ธ์ถ ์์์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์) ์๋ชป ์ ์ฉ๋ ๊ฒฝ์ฐ
<div><span style="color:red;"><font size="4">์ด ๋ฌธ์ฅ์ ์ค์ํฉ๋๋ค</font></span></div>
๋ธ๋ก๊ทธ ์๋ํฐ ์ต์ ์ฌ์ฉ ๋ ธํ์ฐ
1. ์๋ํฐ์์ ์์ฑ ํ ์ฝ๋ ์ง์ ํ์ธ
์๋ํฐ๋ฅผ ํตํด ๊ธ์ ์์ฑํ ํ ๋ฐ๋์ HTML ๋ชจ๋ ๋๋ ์์ค ๋ณด๊ธฐ๋ก ์ ํํ์ฌ ๋ถํ์ํ ํ๊ทธ๋ฅผ ์ ๋ฆฌํ์ธ์.
2. ํ ์คํธ ์์ฃผ ์์ฑ ์คํ์ผ ์ต์ํ
๊ตต์ ๊ธ์จ๋ ์์ ๊ฐ์กฐ๋ ๊ผญ ํ์ํ ๊ณณ์๋ง ์ฌ์ฉํ์ธ์. ๊ฐ๋ฅํ ํ ๊ธฐ๋ณธ ์คํ์ผ์ ์ ์งํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
3. ์ ๋ชฉ ํ๊ทธ๋ ๊ตฌ์กฐ์ ๋ง๊ฒ ์ฌ์ฉ
- h1: ํ์ด์ง ๋๋ ๊ธ์ ์ ๋ชฉ (1๊ฐ๋ง ์ฌ์ฉ)
- h2, h3: ํ์ ์ฃผ์ ๋ณ ์ ๋ชฉ (์์ฐจ์ ์ฌ์ฉ)
4. ํ์ค ๊ตฌ์กฐ๋ก ์ฝํ ์ธ ์ ๋ฆฌ
- ๋ชฉ๋ก์ ul,ol ํ๊ทธ๋ก ๊ตฌ์ฑ
- ํ ์คํธ ๊ตฌ๋ถ์ p ํ๊ทธ ์ฌ์ฉ
<p>์ด ๋ฌธ์ฅ์ ์ค์ํฉ๋๋ค</p>
์๋ํฐ์์ ์์ ํด์ผ ํ ๊ธฐ๋ฅ SEO์ ๋ถ๋ฆฌํ ์๊ฐ์ ๊พธ๋ฐ
๋ธ๋ก๊ทธ ์๋ํฐ๋ ๋ค์ํ ๊ธ๊พธ๋ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ง๋ง, ๊ฒ์์์ง ์ต์ ํ(SEO) ๊ด์ ์์๋ ์ผ๋ถ ๊ธฐ๋ฅ์ด ์คํ๋ ค ์ฝํ ์ธ ํ์ง์ ํด์น๋ ์์๊ฐ ๋ ์ ์์ต๋๋ค. ํนํ ์๋์ ๊ฐ์ ๊ธฐ๋ฅ๋ค์ ๊ฒ์์์ง์ด ์ฝํ ์ธ ์ ๋ณธ์ง์ ํ์ ํ๋ ๋ฐ ๋ฐฉํด๊ฐ ๋๋ฏ๋ก ์์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
1. ๊ธ๊ผด ๋ณ๊ฒฝ (ํฐํธ ์คํ์ผ ์ง์ )
- ๋ฌธ์ ์ : ๋ค์ํ ๊ธ๊ผด์ span style="font-family: ..." ๋ฑ์ ์ธ๋ผ์ธ ์คํ์ผ ์ฝ๋๋ก ์ฝ์ ๋๋ฉฐ, ์ด๋ HTML ์ฝ๋์ ๋ถํ์ํ ๋ณต์ก์ฑ์ ์ ๋ฐํฉ๋๋ค.
- SEO ์ํฅ: ์ฝํ ์ธ ๊ตฌ์กฐ๊ฐ ์ด์ง๋ฝํ์ง๊ณ , ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ด๋ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ํฐํธ ํธํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
์ถ์ฒ: ์ ์ฒด ํฐํธ๋ CSS์์ ์ฌ์ดํธ ๊ณตํต์ผ๋ก ์ง์ ํ๊ณ , ๊ธ ์์ฑ ์์๋ ๊ธฐ๋ณธ ๊ธ๊ผด์ ์ ์งํ์ธ์.
2. ๊ธ์ ์์ ๋ณ๊ฒฝ
- ๋ฌธ์ ์ :font color="..." ๋๋ span style="color:..." ๊ฐ์ ํ๊ทธ๊ฐ ์ฝ์ ๋์ด, ๊ฒ์์์ง์ด ๊ธ์ ๊ตฌ์กฐ๋ฅผ ํผ๋์ค๋ฝ๊ฒ ์ธ์ํ ์ ์์ต๋๋ค.
- SEO ์ํฅ: ์์์ผ๋ก ๊ฐ์กฐํ ํค์๋๊ฐ ๋ง์์ง ๊ฒฝ์ฐ, ํค์๋ ์คํธ์ผ๋ก ์ธ์๋ ์ฐ๋ ค๋ ์์ต๋๋ค.
์ถ์ฒ: ์ค์ํ ํค์๋๋ ๊ตฌ์กฐ์ ์ผ๋ก strong;, h2 ๋ฑ์ผ๋ก ๊ตฌ๋ถํ๊ณ , ์์ ๊ฐ์กฐ๋ CSS์์ ์ง์ ํ์ธ์.
3. ๊ธ์ ๋ฐฐ๊ฒฝ์ ์ ์ฉ
- ๋ฌธ์ ์ : ๋ฐฐ๊ฒฝ์์ span style="background-color:...";์ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํ๋ฉฐ ์๊ฐ์ ํผ๋์ ์ ๋ฐํ ์ ์์ต๋๋ค.
- SEO ์ํฅ: ๋ถํ์ํ ์คํ์ผ ์ฝ๋๊ฐ ๋ง์์ง๋ฉด ํ์ด์ง ๋ก๋ฉ์ด ๋๋ ค์ง๊ณ , ๊ฒ์๋ด์ ํ์ฑ ํจ์จ์ด ์ ํ๋ฉ๋๋ค.
์ถ์ฒ: ๊ฐ์กฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ ๋ฐ์ค ํํ์ CSS ํด๋์ค๋ฅผ ์ฌ์ฉํด ์ฝํ ์ธ ๊ตฌ์กฐ๋ฅผ ์ ์งํ์ธ์.
4. ์ด๋ชจํฐ์ฝ/์คํฐ์ปค ๋จ์ฉ
- ๋ฌธ์ ์ : ๋ชจํฐ์ฝ์ ์ด๋ฏธ์ง๋ก ์ฝ์ ๋๋ฉฐ, ์ ํํ๋์ด ์์ด ์ฌ์ฉ์๋ฟ๋ง ์๋๋ผ ๊ฒ์๋ถ์๊ฒ๋ ์๋ฏธ๋ฅผ ๋ถ์ฌํ๊ธฐ ํ
- SEO ์ํฅ: ์๋ฏธ ์๋ ์ด๋ฏธ์ง๋ก ์ธ์๋์ด ๋ณธ๋ฌธ์ ํ์ง์ด ๋ฎ๊ฒ ํ๊ฐ๋ ์ ์์ผ๋ฉฐ, ๋ชจ๋ฐ์ผ์์ ๊ฐ๋ ์ฑ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค.
์ถ์ฒ: ๊ฐ์ ์ ํํํ๋ ค๋ฉด ์ด๋ชจํฐ์ฝ ๋์ ๋ฌธ์ฅ์ผ๋ก ์์ฐ์ค๋ฝ๊ฒ ์์ฑํ์ธ์.
์ต์ ํ ์ฝ๋๋ฅผ ํ์ฉํ๊ธฐ ์ํด ์๋ ์ ๋ฆฌ ๋๊ตฌ ์ฌ์ฉ
์ง์ HTML ์ฝ๋๋ฅผ ๋ค๋ฌ๋ ๊ฒ์ ๋งค์ฐ ๋ฒ๊ฑฐ๋กญ๊ณ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๋ ์์ ์ ๋๋ค. ์ด๋ฐ ๋ฒ๊ฑฐ๋ก์์ ์ค์ด๊ธฐ ์ํด ์๋ ๋งํฌ์ ์ฝ๋ ์ ๋ฆฌ๊ธฐ๋ฅผ ํ์ฉํด๋ณด์ธ์:
์ฌ์ฉ ์ ์ฃผ์์ฌํญ:
- ์๋ ์ ๋ฆฌ ์ , ์ค์ํ ๋์์ธ ์์๊ฐ CSS๋ก ์ ์ฉ๋์๋์ง ๋ฐ๋์ ํ์ธํ์ธ์.
- ์ ๊ฑฐ ๋์์ด ๋๋ font span ๋ฑ์ ๋ถํ์ํ ํ๊ทธ๊ฐ ํต์ฌ ๊ธฐ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์๋๋ก ์ฌ์ CSS ์์ ์ด ํ์ํฉ๋๋ค.
SEO ํฅ์์ ์ํ ์ถ๊ฐ ํ
- ๋ฉํ ํ๊ทธ ์ค์ : ์ ๋ชฉ(title)๊ณผ ์ค๋ช (description)์ ๊ฐ๊ฒฐํ๊ณ ํค์๋ ์ค์ฌ์ผ๋ก ์์ฑ
- ๋ด๋ถ ๋งํฌ ํ์ฉ: ๊ด๋ จ ๊ฒ์๊ธ ๋งํฌ ์ฝ์ ์ผ๋ก ์ฒด๋ฅ์๊ฐ ์ฆ๊ฐ
- ํค์๋ ์ ๋ต์ ๋ฐฐ์น: ์ ๋ชฉ, ์์ ๋ชฉ, ๋ณธ๋ฌธ ์ฒซ ๋ฌธ๋จ, ๊ฒฐ๋ก ๋ฑ์ ํต์ฌ ํค์๋ ์ฝ์
- ๋ชจ๋ฐ์ผ ์ต์ ํ: ๋ชจ๋ฐ์ผ ํ์ด์ง ์๋์ ๋ฐ์ํ ๋์์ธ ์ฒดํฌ
์๋ํฐ๋ '์ต์ํ'์ผ๋ก, ์ฝํ ์ธ ๋ '์ต๋ํ' ๊ฐ๋จํ ์ฝ๋๋ก!
๋ธ๋ก๊ทธ ์๋ํฐ๋ ํธ๋ฆฌํ ๋๊ตฌ์ด์ง๋ง, ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๊ฑฐ๋ ์ฝ๋ ์ ๋ฆฌ๋ฅผ ํ์ง ์์ผ๋ฉด SEO์ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค. ๋ถํ์ํ ์ฝ๋๋ ๊ฒ์์์ง์๊ฒ ํผ๋์ ์ฃผ๊ณ , ์ด๋ ๊ณง ๊ฒ์ ๋ ธ์ถ ๊ฐ์๋ก ์ด์ด์ง๋๋ค.
์๋ํฐ๋ฅผ ์ ๋ฆฌ๋ ๊ตฌ์กฐ๋ก ์ต์ํ๋ง ์ฌ์ฉํ๊ณ , HTML ์ฝ๋๋ฅผ ์ง์ ๋ค๋ฌ๋ ์ต๊ด์ ํตํด ๊ฒ์์์ง์ ์ข๋ ์ ๋ฆฌํ ์์น์ ๊ณ ํ์ง ์ฝํ ์ธ ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์.
๐ ์ถ์ฒ ๊ธ
์ ๋์ผ์ค ์์ต์ด ์ค๋ฅด์ง ์๋ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ฑฐ๋ฅผ ์ํ ๊ฐ์ด๋
๋ชจ๋ฐ์ผ ๊ด๊ณ ๋
ธ์ถ ํ๊ณ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ๊ถ๊ธํ๋ค๋ฉด ๊ผญ ์ฝ์ด๋ณด์ธ์.
๐ https://qcai.kr/6546/