โป ์ด ๊ด๊ณ ๋ Dable ๊ด๊ณ ๋คํธ์ํฌ๋ฅผ ํตํด ์ ๊ณต๋๋ฉฐ, ์ด์ ๋ฐ๋ฅธ ๊ด๊ณ ์์ต์ด ๋ฐ์ํฉ๋๋ค.
์ํ ์ ๋ณด ์๋ ์ถ์ถ๋ถํฐ HTML ์ฝ๋ ์์ฑ ๋ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋ฅ๊น์ง
์ฟ ํก ํํธ๋์ค ํ๋์ ํ๊ณ ์๋ ๋ธ๋ก๊ฑฐ๋ ๋ง์ผํฐ๋ผ๋ฉด, ์ํ ์ ๋ณด๋ฅผ ์ผ์ผ์ด ๋ณต์ฌํด์ HTML ์ฝ๋๋ก ์์ฑํ๋ ๋ฐ๋ณต ์์ ์ด ์ผ๋ง๋ ๋ฒ๊ฑฐ๋กญ๊ณ ์๊ฐ ์๋ชจ๊ฐ ํฐ์ง ์ ์์ค ๊ฒ๋๋ค. ํนํ ๋ธ๋ก๊ทธ์ ์ํ ๋ฆฌ๋ทฐ๋ ์ถ์ฒ ํฌ์คํ ์ ์์ฃผ ์ฌ๋ฆฌ๋ ๋ถ๋ค์๊ฒ ๊ด๊ณ ์ฝ๋ ์์ฑ๊ณผ ๋งํฌ ์ฝ์ ์ ํ์์ง๋ง ๊ท์ฐฎ์ ์ผ์ ๋๋ค.
๋ฐ๋ณต์์ ๋! ์ฟ ํก ํํธ๋์ค์ฉ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก ๋ธ๋ก๊ทธ ์๋ํ ํ๊ธฐ
์ด ๊ธ์์๋ ์ฟ ํก ์ํ ์์ธ ์ ๋ณด๋ฅผ ์๋์ผ๋ก ์ถ์ถํ๊ณ , HTML ๊ด๊ณ ์ฝ๋๋ฅผ ์ฆ์ ์์ฑํ๋ฉฐ, ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊น์ง ๊ฐ๋ฅํ ์ฟ ํก ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ ๊ธฐ๋ฐ ์๋ํ ๋๊ตฌ๋ฅผ ์๊ฐํฉ๋๋ค. ์๋ ์์
์์ด๋ ์ด๋ฏธ์ง, ์ ๋ชฉ, ๊ฐ๊ฒฉ, ์ค๋ช
๋ฑ ์ํ ์ ๋ณด๋ฅผ ๊ตฌ์กฐํ๋ ํํ๋ก ๋ถ๋ฌ์ค๊ณ , ์ฟ ํก ์ ํด ๋งํฌ๋ฅผ ์๋์ผ๋ก ์์ฑํด ๋ธ๋ก๊ทธ ํฌ์คํ
์ ํจ์ฌ ํจ์จ์ ์ผ๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
๊ธฐ์กด ์ฟ ํก ๊ด๋ จ ํด๋ค์ ํ์ธต ์
๊ทธ๋ ์ด๋ํ์ฌ, ๋ธ๋ก๊ทธ ์ฝํ
์ธ ์ ์์ ์์ฐ์ฑ๊ณผ SEO ์ต์ ํ๊น์ง ๊ณ ๋ คํ ์ค์ ์๋ํ ๋๊ตฌ๋ฅผ ํจ๊ป ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ ๊ทธ๋ ์ด๋ ์ฃผ์ ๊ธฐ๋ฅ ์์ฝ
๊ธฐ๋ฅ | ์ค๋ช |
---|---|
์ํ ์ ๋ณด ์๋ ์ถ์ถ | ์ฟ ํก ์ํ ์์ธ ํ์ด์ง์์ ์ ๋ชฉ, ๊ฐ๊ฒฉ, ์ด๋ฏธ์ง, ๋ณ์ , ์ค๋ช ๋ฑ์ ์๋ ์์ง |
์ฟ ํก ํํธ๋์ค ๋ฅ๋งํฌ ์๋ ์์ฑ | ํด๋ฆญ ํ ๋ฒ์ผ๋ก ์ ํด ๋งํฌ ๋ฐ๊ธ ๋ฐ ํด๋ฆฝ๋ณด๋ ๋ณต์ฌ |
JSON ๋ฐ์ดํฐ ๋ณต์ฌ | ์์ง๋ ์ํ ์ ๋ณด๋ฅผ JSON ํํ๋ก ๋ณต์ฌ |
HTML ์ฝ๋ ์๋ ์์ฑ | ๋ธ๋ก๊ทธ์ ๋ถ์ฌ ๋ฃ์ ์ ์๋ HTML ํ ์ด๋ธ ์ฝ๋ ์๋ ์์ฑ |
์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ์ | HTML ์ฝ๋๋ฅผ ๋ณต์ฌํจ๊ณผ ๋์์ ๋ธ๋ก๊ทธ์ฉ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ์ธ ๊ฐ๋ฅ |

1. ์ํ ์ ๋ณด ์๋ ์ถ์ถ ๊ธฐ๋ฅ
๊ธฐ์กด์๋ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด๊ณ ์ผ์ผ์ด ์ํ๋ช , ๊ฐ๊ฒฉ, ์ด๋ฏธ์ง URL์ ๋ณต์ฌํด์ผ ํ๋ค๋ฉด, ์ด์ extractProductInfo() ํจ์๊ฐ ๊ทธ ์๊ณ ๋ฅผ ๋์ด์ค๋๋ค.
์ถ์ถ๋๋ ์ฃผ์ ์ ๋ณด
- ์ํ๋ช : ์์ธ ํ์ด์ง ์๋จ์ ํ์ดํ ์์ญ์์ ์๋ ์ถ์ถ
- ๊ฐ๊ฒฉ: '์' ์ ๊ฑฐ ๋ฐ ์ผํ ์๋ ์ซ์ ํํ๋ก ์ถ์ถ๋จ HTML ์์ฑ ์ ๋ค์ ํฌ๋งท ์ ์ฉ
- ๋ํ ์ด๋ฏธ์ง ๋ฐ ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง(์ต๋ 4๊ฐ): ์๋์ผ๋ก ํฌ๊ธฐ ์กฐ์ ๋ฐ ๋ฐฐ์ด
- ์์ธ ์ค๋ช : .sdp-detail-content ๋ด HTML ๊ตฌ์กฐ ๊ทธ๋๋ก ์์ง
- ๋ณ์ : CSS ์คํ์ผ ๊ฐ์ผ๋ก๋ถํฐ ๋ณ์ ํผ์ผํธ ๊ณ์ฐ ํ 5์ ๋ง์ ํ์ฐ
2. ์ฟ ํก ํํธ๋์ค ๋ฅ๋งํฌ ์๋ ์์ฑ
๋ฒํผ ํ๋๋ก ํ์ฌ ํ์ด์ง์ URL์ ์ฟ ํก ํํธ๋์ค API๋ฅผ ํตํด ์ ํด ๋งํฌ๋ก ์ ํํ๋ฉฐ, ์๋ ํด๋ฆฝ๋ณด๋ ๋ณต์ฌ ๊ธฐ๋ฅ๊น์ง ํฌํจ๋ฉ๋๋ค. ์คํจ ์ ์์ธ ์ฒ๋ฆฌ๋ ์ ์ฉ๋ผ ์์ ์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค.
3. JSON ๋ฐ์ดํฐ ๋ณต์ฌ ๋ฒํผ
์ด ๊ธฐ๋ฅ์ ์ํ ์ ๋ณด๋ฅผ ๊ฐ๊ณต ์ ์์ ๋ฐ์ดํฐ๋ก ์ ์ฅํ๊ณ ์ ํ๋ ์ฌ์ฉ์์๊ฒ ์ ์ฉํฉ๋๋ค.
๋ฒํผ ํด๋ฆญ ์ JSON ํ์์ผ๋ก ๋ณด๊ธฐ ์ข๊ฒ ๋ค์ฌ์ฐ๊ธฐ(pretty print)๋ ๋ฐ์ดํฐ๊ฐ ๋ณต์ฌ๋๋ฏ๋ก, ๋ณ๋ ๋ก๊ทธ ์ ์ฅ์ด๋ ์ธ๋ถ DB ์ฐ๋์๋ ํ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
4. HTML ์ฝ๋ ์๋ ์์ฑ๊ณผ ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
์ด๋ฒ ์ ๊ทธ๋ ์ด๋์์ ๊ฐ์ฅ ๋์ ๋๋ ๊ธฐ๋ฅ ์ค ํ๋๋ ๋ธ๋ก๊ทธ์ฉ HTML ๊ด๊ณ ์ฝ๋์ ์๋ ์์ฑ ๊ธฐ๋ฅ์ ๋๋ค. ๋จ์ํ ๋งํฌ ๋ณต์ฌ๋ฅผ ๋์ด, ์ค์ ์ฝํ ์ธ ํํ๋ก ํ์ฉํ ์ ์๋ ๊ตฌ์กฐํ๋ ๊ด๊ณ ๋ธ๋ก์ ์๋์ผ๋ก ๋ง๋ค์ด์ฃผ๋ ์ ์ด ํน์ง์ ๋๋ค.
์ฌ์ฉ์๋ ์ฟ ํก ์ํ ํ์ด์ง์์ ๋ฒํผ ํ ๋ฒ๋ง ํด๋ฆญํ๋ฉด, ํด๋น ์ํ์ ์ด๋ฏธ์ง, ์ ๋ชฉ, ๊ฐ๊ฒฉ, ์์ธ ๋งํฌ๊ฐ ํฌํจ๋ ํ ์ด๋ธ ํ์์ HTML ์ฝ๋๋ฅผ ์๋์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค. ์์ฑ๋ ์ฝ๋๋ ๊ณง๋ฐ๋ก ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋๋ฉฐ, ๋์์ ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ์ ์ฐฝ์ ํตํด ๊ฒฐ๊ณผ๋ฌผ์ด ์ด๋ป๊ฒ ๋ณด์ด๋์ง๋ ๋ฐ๋ก ํ์ธ ๊ฐ๋ฅํฉ๋๋ค.
์๋ ๋ฐฉ์
- ์ฟ ํก ์ํ ์ ๋ณด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ํ ์ด๋ธ ํํ์ ๊ด๊ณ HTML ์ฝ๋ ์์ฑ
- ์ฝ๋ ๋ณต์ฌ์ ๋์์ ๋ชจ๋ฌ ํ์์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ฐฝ ํ์
- ์๋์ ๊ฐ์ ๊ตฌ์กฐ์ ํ ์ด๋ธ์ด ์๋ ์์ฑ๋ฉ๋๋ค:
<table class="darkcard-product-table" border="1">
<tbody>
<tr><td><img src="๋ํ ์ด๋ฏธ์ง URL" alt="์ํ๋ช
"></td></tr>
<tr><td><strong>์ํ๋ช
</strong></td></tr>
<tr><td><strong>๊ฐ๊ฒฉ</strong></td></tr>
<tr><td><a href="์ฟ ํก ๋ฅ๋งํฌ" target="_blank" rel="nofollow noopener sponsored">์์ธ ๋ณด๊ธฐ</a></td></tr>
</tbody>
</table>
<p style="font-size:13px;color:#888;">โป ์ด ํฌ์คํ
์ ์ฟ ํก ํํธ๋์ค ํ๋์ ์ผํ์ผ๋ก ์ผ์ ์ก์ ์์๋ฃ๋ฅผ ์ ๊ณต๋ฐ์ต๋๋ค.</p>
ํ์ฉ ํ:
- HTML ์ฝ๋ ๋ณต์ฌ ํ ํฐ์คํ ๋ฆฌ/์๋ํ๋ ์ค ๋ณธ๋ฌธ์ ๊ทธ๋๋ก ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋!
- ํ๊ทธ๋ SEO ์นํ์ ์ธ ๊ตฌ์กฐ์ด๋ฉฐ, ์ด๋ฏธ์ง alt ์์ฑ๋ ํฌํจ
- CSS๋ฅผ ์ถ๊ฐํด์ ๋์์ธ์ ์ด์ํ๋ ๋ธ๋ก๊ทธ์ ๋ง๊ฒ ์ฌ์ฉํ์ธ์
5. ๋๊ฐ์ฑ ๋ฌธ๊ตฌ ์๋ ์ถ๊ฐ ๊ธฐ๋ฅ
๋ธ๋ก๊ทธ๋ ์น์ฌ์ดํธ์ ์ฟ ํก ํํธ๋์ค ๋ฑ ์ ํด ๊ด๊ณ ๋ฅผ ๊ฒ์ฌํ ๋๋ ๋ฐ๋์ ๋๊ฐ์ฑ ๋ฌธ๊ตฌ๋ฅผ ๋ช
ํํ ํ์ํด์ผ ํฉ๋๋ค.
์ด ๊ธฐ๋ฅ์ ์ฌ์ฉ์๊ฐ ๋ณ๋๋ก ๋ฌธ๊ตฌ๋ฅผ ์์ฑํ์ง ์์๋, ๊ด๊ณ ์ฝ๋ ์์ฑ ์ ์๋์ผ๋ก ‘โป ์ด ํฌ์คํ
์ ์ฟ ํก ํํธ๋์ค ํ๋์ ์ผํ์ผ๋ก ์ผ์ ์ก์ ์์๋ฃ๋ฅผ ์ ๊ณต๋ฐ์ต๋๋ค.์ ๊ฐ์ ๋๊ฐ์ฑ ๋ฌธ๊ตฌ๋ฅผ ์ฝ์
ํด ์ค๋๋ค.
๋๋ถ์ ๋ฒ์ ์๋ฌด๋ฅผ ์ฝ๊ฒ ์ค์ํ ์ ์์ผ๋ฉฐ, ๋ฐฉ๋ฌธ์์๊ฒ๋ ํฌ๋ช ํ ์ ๋ณด๋ฅผ ์ ๊ณตํด ์ ๋ขฐ๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
UI ๊ตฌ์ฑ ๋ฒํผ 3์ข ์ธํธ
ํ๋ฉด ์ฐ์ธก ํ๋จ์ ๋ค์๊ณผ ๊ฐ์ ํ๋กํ ๋ฒํผ 3๊ฐ๊ฐ ์์ฑ๋ฉ๋๋ค:
๋ฒํผ๋ช | ๊ธฐ๋ฅ |
---|---|
์ฟ ํก๋งํฌ๋ง๋ค๊ธฐ | ์ฟ ํก ์ ํด ๋งํฌ ๋ฐ๊ธ ๋ฐ ๋ณต์ฌ |
์ํ ์ ๋ณด ๋ณต์ฌ (JSON) | ์ํ ์์ ๋ฐ์ดํฐ(JSON) ๋ณต์ฌ |
HTML ์ฝ๋ ์์ฑ | ๋ธ๋ก๊ทธ์ฉ ๊ด๊ณ ์ฝ๋ ์์ฑ + ๋ฏธ๋ฆฌ๋ณด๊ธฐ |
๋ฒํผ์ ์ค๋ณต ์คํ ๋ฐฉ์ง๋ฅผ ์ํด ํ ๋ฒ๋ง ์์ฑ๋๋ฉฐ, DOMContentLoaded ํ ์๋ ์ฝ์ ๋ฉ๋๋ค.
์ค์น ๋ฐ ์ ์ฉ ๋ฐฉ๋ฒ
์์ธํ ์ค์ ๋ฐฉ๋ฒ์ ์ด์ ๊ธ์ ์ฐธ๊ณ ํ์ธ์!
- manifest.json์์ content script์ content.js ์ฐ๊ฒฐ
- ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก ์์ถ ํ ๋ฑ๋ก
- ์ฟ ํก ์ํ ์์ธ ํ์ด์ง ์ ์ ์ ์๋ ์๋
๋ง๋ฌด๋ฆฌ ๋ฐ ํ์ฉ ์ ๋ต
์ด๋ฒ ์ ๊ทธ๋ ์ด๋๋ ๋จ์ํ ์ฟ ํก ์ ํด ๋งํฌ ๋ณต์ฌ๋ฅผ ๋์ด, ์ฝํ ์ธ ์๋ํ ๋ฐ SEO ์ต์ ํ๋ ๊ด๊ณ ์ฝํ ์ธ ์ ์๊น์ง ๊ฐ๋ฅํ๊ฒ ํด์ฃผ๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ํนํ ๋ธ๋ก๊ทธ ์ด์์๋ ๋ง์ผํ ์๋ํ๋ฅผ ์ถ๊ตฌํ๋ ์ด๋ค์๊ฒ ๋งค์ฐ ์ ์ฉํ๋ฉฐ, ๋ฐ๋ณต์ ์ธ ์์ ์ ํ๊ธฐ์ ์ผ๋ก ์ค์ฌ์ค๋๋ค.
์ฟ ํก ํํธ๋์ค ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์ด๋ค ๊ธฐ๋ฅ์ ์ ๊ณตํ๋์?
์ฟ ํก ์ํ ์์ธ ์ ๋ณด๋ฅผ ์๋์ผ๋ก ์ถ์ถํด ์ ๋ชฉ, ๊ฐ๊ฒฉ, ์ด๋ฏธ์ง, ๋ณ์ , ์ค๋ช ๋ฑ์ ์์งํ๊ณ , ์ฟ ํก ์ ํด ๋ฅ๋งํฌ๋ฅผ ํด๋ฆญ ํ ๋ฒ์ผ๋ก ์์ฑํฉ๋๋ค. ๋ํ JSON ๋ฐ์ดํฐ ๋ณต์ฌ, HTML ์ฝ๋ ์๋ ์์ฑ, ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ์ ๊ธฐ๋ฅ๋ ํฌํจ๋์ด ๋ธ๋ก๊ทธ ํฌ์คํ ์์ ์ ํจ์ฌ ํธ๋ฆฌํ๊ฒ ๋ง๋ค์ด ์ค๋๋ค.
์๋ ์์ฑ๋ HTML ์ฝ๋๋ ์ด๋ป๊ฒ ํ์ฉํ ์ ์๋์?
์์ฑ๋ ํ ์ด๋ธ ํ์์ HTML ์ฝ๋๋ ๋ฐ๋ก ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋์ด ํฐ์คํ ๋ฆฌ๋ ์๋ํ๋ ์ค ๋ณธ๋ฌธ์ ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋ฉ๋๋ค. SEO ์นํ์ ๊ตฌ์กฐ์ด๋ฉฐ ์ด๋ฏธ์ง alt ์์ฑ๋ ํฌํจ๋์ด ์์ด ๊ฒ์ ์ต์ ํ์ ์ ๋ฆฌํ๊ณ , ํ์ ์ CSS๋ฅผ ์ถ๊ฐํด ๋์์ธ์ ์กฐ์ ํ ์ ์์ต๋๋ค.
๋๊ฐ์ฑ ๋ฌธ๊ตฌ ์๋ ์ถ๊ฐ ๊ธฐ๋ฅ์ ๋ฌด์์ธ๊ฐ์?
์ ํด ๊ด๊ณ ๊ฒ์ฌ ์ ๋ฐ๋์ ํ์ํด์ผ ํ๋ ๋๊ฐ์ฑ ๋ฌธ๊ตฌ๋ฅผ ์ฌ์ฉ์๊ฐ ๋ฐ๋ก ์ ๋ ฅํ์ง ์์๋ ์๋์ผ๋ก ์ฝ์ ํด ์ฃผ๋ ๊ธฐ๋ฅ์ ๋๋ค. ‘โป ์ด ํฌ์คํ ์ ์ฟ ํก ํํธ๋์ค ํ๋์ ์ผํ์ผ๋ก ์ผ์ ์ก์ ์์๋ฃ๋ฅผ ์ ๊ณต๋ฐ์ต๋๋ค.’๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๊ด๊ณ ์ฝ๋์ ํฌํจ๋์ด ๋ฒ์ ์๋ฌด๋ฅผ ์ฝ๊ฒ ์ค์ํ ์ ์์ต๋๋ค.
์์ด์ปจ
'SEO > seo-resources' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
โป ์ด ๊ด๊ณ ๋ Dable ๊ด๊ณ ๋คํธ์ํฌ๋ฅผ ํตํด ์ ๊ณต๋๋ฉฐ, ์ด์ ๋ฐ๋ฅธ ๊ด๊ณ ์์ต์ด ๋ฐ์ํฉ๋๋ค.