1<!DOCTYPE html>
2<html lang="ko">
3<head>
4 <!-- κΈ°λ³Έ λ©ν νκ·Έ -->
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- SEO ν΅μ¬ λ©ν νκ·Έ -->
9 <title>SEO μ΅μ ν μμ | κ²μ μμ§ μ΅μ ν κ°μ΄λ - WebDev Study</title>
10 <meta name="description" content="μΉ κ°λ°μλ₯Ό μν SEO(κ²μ μμ§ μ΅μ ν) μλ²½ κ°μ΄λ. λ©ν νκ·Έ, ꡬ쑰ν λ°μ΄ν°(JSON-LD), Open Graph, μλ§¨ν± HTML μμ μ ν¨κ» Core Web Vitals μ΅μ ν λ°©λ²μ λ°°μ보μΈμ.">
11 <meta name="keywords" content="SEO, κ²μ μμ§ μ΅μ ν, λ©ν νκ·Έ, JSON-LD, ꡬ쑰ν λ°μ΄ν°, Open Graph, Core Web Vitals, μΉ κ°λ°">
12 <meta name="author" content="WebDev Study">
13 <meta name="robots" content="index, follow">
14
15 <!-- Open Graph (Facebook, LinkedIn λ±) -->
16 <meta property="og:type" content="article">
17 <meta property="og:title" content="SEO μ΅μ ν μμ | κ²μ μμ§ μ΅μ ν κ°μ΄λ">
18 <meta property="og:description" content="μΉ κ°λ°μλ₯Ό μν SEO μλ²½ κ°μ΄λ. λ©ν νκ·Έ, ꡬ쑰ν λ°μ΄ν°, Core Web Vitals μ΅μ ν λ°©λ².">
19 <meta property="og:image" content="https://example.com/images/seo-guide-thumbnail.jpg">
20 <meta property="og:image:width" content="1200">
21 <meta property="og:image:height" content="630">
22 <meta property="og:url" content="https://example.com/seo-guide">
23 <meta property="og:site_name" content="WebDev Study">
24 <meta property="og:locale" content="ko_KR">
25 <meta property="article:published_time" content="2024-01-15T09:00:00+09:00">
26 <meta property="article:modified_time" content="2024-01-20T14:30:00+09:00">
27 <meta property="article:author" content="https://example.com/about">
28 <meta property="article:section" content="Web Development">
29 <meta property="article:tag" content="SEO">
30 <meta property="article:tag" content="Web Development">
31
32 <!-- Twitter Card -->
33 <meta name="twitter:card" content="summary_large_image">
34 <meta name="twitter:site" content="@webdevstudy">
35 <meta name="twitter:creator" content="@webdevstudy">
36 <meta name="twitter:title" content="SEO μ΅μ ν μμ | κ²μ μμ§ μ΅μ ν κ°μ΄λ">
37 <meta name="twitter:description" content="μΉ κ°λ°μλ₯Ό μν SEO μλ²½ κ°μ΄λ. λ©ν νκ·ΈλΆν° Core Web VitalsκΉμ§.">
38 <meta name="twitter:image" content="https://example.com/images/seo-guide-twitter.jpg">
39 <meta name="twitter:image:alt" content="SEO μ΅μ ν κ°μ΄λ μΈλ€μΌ μ΄λ―Έμ§">
40
41 <!-- νμ€ URL (Canonical) -->
42 <link rel="canonical" href="https://example.com/seo-guide">
43
44 <!-- λ체 μΈμ΄ λ²μ (λ€κ΅μ΄ μ¬μ΄νΈμ©) -->
45 <link rel="alternate" hreflang="en" href="https://example.com/en/seo-guide">
46 <link rel="alternate" hreflang="ja" href="https://example.com/ja/seo-guide">
47 <link rel="alternate" hreflang="ko" href="https://example.com/ko/seo-guide">
48 <link rel="alternate" hreflang="x-default" href="https://example.com/seo-guide">
49
50 <!-- νλΉμ½ -->
51 <link rel="icon" type="image/x-icon" href="/favicon.ico">
52 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
53 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
54 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
55
56 <!-- ν리λ‘λ (Core Web Vitals μ΅μ ν) -->
57 <link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
58 <link rel="preconnect" href="https://fonts.googleapis.com">
59 <link rel="dns-prefetch" href="https://www.google-analytics.com">
60
61 <!-- ꡬ쑰ν λ°μ΄ν° (JSON-LD) -->
62 <script type="application/ld+json">
63 {
64 "@context": "https://schema.org",
65 "@type": "Article",
66 "headline": "SEO μ΅μ ν μμ | κ²μ μμ§ μ΅μ ν κ°μ΄λ",
67 "description": "μΉ κ°λ°μλ₯Ό μν SEO μλ²½ κ°μ΄λ",
68 "image": [
69 "https://example.com/images/seo-guide-1x1.jpg",
70 "https://example.com/images/seo-guide-4x3.jpg",
71 "https://example.com/images/seo-guide-16x9.jpg"
72 ],
73 "author": {
74 "@type": "Person",
75 "name": "νκΈΈλ",
76 "url": "https://example.com/about/hong"
77 },
78 "publisher": {
79 "@type": "Organization",
80 "name": "WebDev Study",
81 "logo": {
82 "@type": "ImageObject",
83 "url": "https://example.com/logo.png"
84 }
85 },
86 "datePublished": "2024-01-15T09:00:00+09:00",
87 "dateModified": "2024-01-20T14:30:00+09:00",
88 "mainEntityOfPage": {
89 "@type": "WebPage",
90 "@id": "https://example.com/seo-guide"
91 }
92 }
93 </script>
94
95 <!-- μΉμ¬μ΄νΈ ꡬ쑰ν λ°μ΄ν° -->
96 <script type="application/ld+json">
97 {
98 "@context": "https://schema.org",
99 "@type": "WebSite",
100 "name": "WebDev Study",
101 "url": "https://example.com",
102 "potentialAction": {
103 "@type": "SearchAction",
104 "target": {
105 "@type": "EntryPoint",
106 "urlTemplate": "https://example.com/search?q={search_term_string}"
107 },
108 "query-input": "required name=search_term_string"
109 }
110 }
111 </script>
112
113 <!-- μ‘°μ§ κ΅¬μ‘°ν λ°μ΄ν° -->
114 <script type="application/ld+json">
115 {
116 "@context": "https://schema.org",
117 "@type": "Organization",
118 "name": "WebDev Study",
119 "url": "https://example.com",
120 "logo": "https://example.com/logo.png",
121 "sameAs": [
122 "https://twitter.com/webdevstudy",
123 "https://www.facebook.com/webdevstudy",
124 "https://www.linkedin.com/company/webdevstudy",
125 "https://github.com/webdevstudy"
126 ],
127 "contactPoint": {
128 "@type": "ContactPoint",
129 "telephone": "+82-2-1234-5678",
130 "contactType": "customer service",
131 "availableLanguage": ["Korean", "English"]
132 }
133 }
134 </script>
135
136 <!-- λΉ΅λΆμ€λ¬κΈ°(Breadcrumb) ꡬ쑰ν λ°μ΄ν° -->
137 <script type="application/ld+json">
138 {
139 "@context": "https://schema.org",
140 "@type": "BreadcrumbList",
141 "itemListElement": [
142 {
143 "@type": "ListItem",
144 "position": 1,
145 "name": "ν",
146 "item": "https://example.com"
147 },
148 {
149 "@type": "ListItem",
150 "position": 2,
151 "name": "μΉ κ°λ°",
152 "item": "https://example.com/web-development"
153 },
154 {
155 "@type": "ListItem",
156 "position": 3,
157 "name": "SEO κ°μ΄λ",
158 "item": "https://example.com/seo-guide"
159 }
160 ]
161 }
162 </script>
163
164 <!-- FAQ ꡬ쑰ν λ°μ΄ν° -->
165 <script type="application/ld+json">
166 {
167 "@context": "https://schema.org",
168 "@type": "FAQPage",
169 "mainEntity": [
170 {
171 "@type": "Question",
172 "name": "SEOλ 무μμΈκ°μ?",
173 "acceptedAnswer": {
174 "@type": "Answer",
175 "text": "SEO(Search Engine Optimization)λ κ²μ μμ§ μ΅μ νμ μ½μλ‘, μΉμ¬μ΄νΈκ° κ²μ κ²°κ³Όμμ λ λμ μμλ₯Ό μ°¨μ§νλλ‘ μ΅μ ννλ κ³Όμ μ
λλ€."
176 }
177 },
178 {
179 "@type": "Question",
180 "name": "λ©ν νκ·Έκ° μ μ€μνκ°μ?",
181 "acceptedAnswer": {
182 "@type": "Answer",
183 "text": "λ©ν νκ·Έλ κ²μ μμ§μ νμ΄μ§μ λ΄μ©μ μλ €μ£Όκ³ , κ²μ κ²°κ³Όμ νμλ μ λͺ©κ³Ό μ€λͺ
μ μ 곡ν©λλ€. μ μ ν λ©ν νκ·Έλ ν΄λ¦λ₯ (CTR)μ λμΌ μ μμ΅λλ€."
184 }
185 }
186 ]
187 }
188 </script>
189
190 <style>
191 * { margin: 0; padding: 0; box-sizing: border-box; }
192 body {
193 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
194 line-height: 1.6;
195 color: #333;
196 max-width: 900px;
197 margin: 0 auto;
198 padding: 20px;
199 }
200 header { margin-bottom: 30px; }
201 h1 { font-size: 2rem; color: #1a73e8; margin-bottom: 10px; }
202 h2 { font-size: 1.5rem; color: #202124; margin: 30px 0 15px; border-bottom: 2px solid #1a73e8; padding-bottom: 5px; }
203 h3 { font-size: 1.2rem; margin: 20px 0 10px; color: #5f6368; }
204 p { margin-bottom: 15px; }
205 .breadcrumb { font-size: 0.9rem; color: #5f6368; margin-bottom: 20px; }
206 .breadcrumb a { color: #1a73e8; text-decoration: none; }
207 .breadcrumb a:hover { text-decoration: underline; }
208 .meta-info { font-size: 0.9rem; color: #5f6368; margin-bottom: 20px; }
209 pre { background: #f8f9fa; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; }
210 code { font-family: 'Fira Code', monospace; }
211 .tip { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 15px; margin: 20px 0; border-radius: 0 8px 8px 0; }
212 .warning { background: #fff3e0; border-left: 4px solid #ff9800; padding: 15px; margin: 20px 0; border-radius: 0 8px 8px 0; }
213 table { width: 100%; border-collapse: collapse; margin: 20px 0; }
214 th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
215 th { background: #1a73e8; color: white; }
216 tr:nth-child(even) { background: #f8f9fa; }
217 .checklist { list-style: none; }
218 .checklist li { padding: 8px 0; padding-left: 30px; position: relative; }
219 .checklist li::before { content: "β
"; position: absolute; left: 0; }
220 footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; color: #5f6368; }
221 @media (max-width: 600px) {
222 h1 { font-size: 1.5rem; }
223 pre { font-size: 0.75rem; }
224 }
225 </style>
226</head>
227<body>
228 <!-- λΉ΅λΆμ€λ¬κΈ° λ€λΉκ²μ΄μ
-->
229 <nav aria-label="λΉ΅λΆμ€λ¬κΈ°" class="breadcrumb">
230 <a href="/">ν</a> >
231 <a href="/web-development">μΉ κ°λ°</a> >
232 <span aria-current="page">SEO κ°μ΄λ</span>
233 </nav>
234
235 <header>
236 <h1>SEO μ΅μ ν μμ </h1>
237 <p class="meta-info">
238 <time datetime="2024-01-15">2024λ
1μ 15μΌ</time> μμ± |
239 <time datetime="2024-01-20">2024λ
1μ 20μΌ</time> μμ |
240 μμ±μ: νκΈΈλ
241 </p>
242 </header>
243
244 <main>
245 <article>
246 <section>
247 <h2>1. λ©ν νκ·Έ κΈ°λ³Έ</h2>
248 <p>κ²μ μμ§μ λ©ν νκ·Έλ₯Ό ν΅ν΄ νμ΄μ§μ λ΄μ©μ νμ
ν©λλ€. κ°μ₯ μ€μν λ©ν νκ·Έλ€μ
λλ€:</p>
249
250 <h3>νμ λ©ν νκ·Έ</h3>
251 <pre><code><!-- νμ΄μ§ μ λͺ© (50-60μ κΆμ₯) -->
252<title>νμ΄μ§ μ λͺ© | μ¬μ΄νΈ μ΄λ¦</title>
253
254<!-- νμ΄μ§ μ€λͺ
(150-160μ κΆμ₯) -->
255<meta name="description" content="νμ΄μ§μ λν κ°κ²°νκ³ λ§€λ ₯μ μΈ μ€λͺ
...">
256
257<!-- λ·°ν¬νΈ (λͺ¨λ°μΌ μ΅μ ν) -->
258<meta name="viewport" content="width=device-width, initial-scale=1.0">
259
260<!-- νμ€ URL -->
261<link rel="canonical" href="https://example.com/page"></code></pre>
262
263 <div class="tip">
264 <strong>π‘ ν:</strong> title νκ·Έλ κ²μ κ²°κ³Όμμ κ°μ₯ λμ λλ μμμ
λλ€.
265 ν΅μ¬ ν€μλλ₯Ό μμͺ½μ λ°°μΉνκ³ , λΈλλλͺ
μ λ€μ λΆμ΄μΈμ.
266 </div>
267 </section>
268
269 <section>
270 <h2>2. Open Graph & Twitter Card</h2>
271 <p>μμ
λ―Έλμ΄μμ 곡μ λ λ νμλλ μ 보λ₯Ό μ μ΄ν©λλ€.</p>
272
273 <h3>Open Graph (Facebook, LinkedIn)</h3>
274 <pre><code><meta property="og:type" content="article">
275<meta property="og:title" content="νμ΄μ§ μ λͺ©">
276<meta property="og:description" content="νμ΄μ§ μ€λͺ
">
277<meta property="og:image" content="https://example.com/image.jpg">
278<meta property="og:url" content="https://example.com/page"></code></pre>
279
280 <h3>Twitter Card</h3>
281 <pre><code><meta name="twitter:card" content="summary_large_image">
282<meta name="twitter:title" content="νμ΄μ§ μ λͺ©">
283<meta name="twitter:description" content="νμ΄μ§ μ€λͺ
">
284<meta name="twitter:image" content="https://example.com/image.jpg"></code></pre>
285
286 <div class="warning">
287 <strong>β οΈ μ£Όμ:</strong> og:imageλ μ΅μ 1200x630 ν½μ
ν¬κΈ°λ₯Ό κΆμ₯ν©λλ€.
288 λ무 μμ μ΄λ―Έμ§λ μμ
λ―Έλμ΄μμ μ리거λ νμλμ§ μμ μ μμ΅λλ€.
289 </div>
290 </section>
291
292 <section>
293 <h2>3. ꡬ쑰ν λ°μ΄ν° (JSON-LD)</h2>
294 <p>ꡬ쑰ν λ°μ΄ν°λ₯Ό μ¬μ©νλ©΄ κ²μ κ²°κ³Όμ λ¦¬μΉ μ€λν«μ΄ νμλ μ μμ΅λλ€.</p>
295
296 <h3>Article μ€ν€λ§</h3>
297 <pre><code><script type="application/ld+json">
298{
299 "@context": "https://schema.org",
300 "@type": "Article",
301 "headline": "κΈ°μ¬ μ λͺ©",
302 "author": {
303 "@type": "Person",
304 "name": "μμ±μ μ΄λ¦"
305 },
306 "datePublished": "2024-01-15T09:00:00+09:00",
307 "image": "https://example.com/image.jpg"
308}
309</script></code></pre>
310
311 <h3>μ£Όμ μ€ν€λ§ νμ
</h3>
312 <table>
313 <thead>
314 <tr>
315 <th>νμ
</th>
316 <th>μ©λ</th>
317 <th>λ¦¬μΉ μ€λν«</th>
318 </tr>
319 </thead>
320 <tbody>
321 <tr>
322 <td>Article</td>
323 <td>λ΄μ€, λΈλ‘κ·Έ κΈ</td>
324 <td>μ λͺ©, μ΄λ―Έμ§, λ μ§</td>
325 </tr>
326 <tr>
327 <td>Product</td>
328 <td>μν νμ΄μ§</td>
329 <td>κ°κ²©, νμ , μ¬κ³ </td>
330 </tr>
331 <tr>
332 <td>Recipe</td>
333 <td>μ리 λ μνΌ</td>
334 <td>쑰리μκ°, μΉΌλ‘리, μ΄λ―Έμ§</td>
335 </tr>
336 <tr>
337 <td>FAQPage</td>
338 <td>μμ£Ό 묻λ μ§λ¬Έ</td>
339 <td>μ§λ¬Έ/λ΅λ³ λͺ©λ‘</td>
340 </tr>
341 <tr>
342 <td>HowTo</td>
343 <td>λ°©λ² μλ΄</td>
344 <td>λ¨κ³λ³ μ€λͺ
</td>
345 </tr>
346 <tr>
347 <td>LocalBusiness</td>
348 <td>μ§μ μ
체</td>
349 <td>μ£Όμ, μμ
μκ°, μ ν</td>
350 </tr>
351 </tbody>
352 </table>
353 </section>
354
355 <section>
356 <h2>4. μλ§¨ν± HTMLκ³Ό SEO</h2>
357 <p>μ¬λ°λ₯Έ HTML ꡬ쑰λ κ²μ μμ§μ΄ μ½ν
μΈ λ₯Ό μ΄ν΄νλ λ° λμμ μ€λλ€.</p>
358
359 <pre><code><!-- μ’μ μμ -->
360<article>
361 <header>
362 <h1>κΈ°μ¬ μ λͺ©</h1>
363 <time datetime="2024-01-15">2024λ
1μ 15μΌ</time>
364 </header>
365
366 <section>
367 <h2>μΉμ
μ λͺ©</h2>
368 <p>μ½ν
μΈ ...</p>
369 </section>
370
371 <footer>
372 <p>μμ±μ: νκΈΈλ</p>
373 </footer>
374</article>
375
376<!-- νΌν΄μΌ ν μμ -->
377<div class="article">
378 <div class="title">κΈ°μ¬ μ λͺ©</div>
379 <div>μ½ν
μΈ ...</div>
380</div></code></pre>
381 </section>
382
383 <section>
384 <h2>5. Core Web Vitals</h2>
385 <p>Googleμ ν΅μ¬ μΉ μ§νλ μ¬μ©μ κ²½νκ³Ό SEOμ μ§μ μ μΈ μν₯μ λ―ΈμΉ©λλ€.</p>
386
387 <table>
388 <thead>
389 <tr>
390 <th>μ§ν</th>
391 <th>μλ―Έ</th>
392 <th>μ’μ</th>
393 <th>κ°μ νμ</th>
394 </tr>
395 </thead>
396 <tbody>
397 <tr>
398 <td>LCP</td>
399 <td>μ΅λ μ½ν
μΈ ν νμΈνΈ</td>
400 <td>β€ 2.5μ΄</td>
401 <td>> 4.0μ΄</td>
402 </tr>
403 <tr>
404 <td>INP</td>
405 <td>λ€μ νμΈνΈμμ μνΈμμ©</td>
406 <td>β€ 200ms</td>
407 <td>> 500ms</td>
408 </tr>
409 <tr>
410 <td>CLS</td>
411 <td>λμ λ μ΄μμ μ΄λ</td>
412 <td>β€ 0.1</td>
413 <td>> 0.25</td>
414 </tr>
415 </tbody>
416 </table>
417
418 <h3>μ΅μ ν ν</h3>
419 <pre><code><!-- LCP μ΅μ ν: μ€μ 리μμ€ ν리λ‘λ -->
420<link rel="preload" href="hero-image.jpg" as="image">
421
422<!-- CLS λ°©μ§: μ΄λ―Έμ§ ν¬κΈ° μ§μ -->
423<img src="image.jpg" width="800" height="600" alt="μ€λͺ
">
424
425<!-- ν°νΈ μ΅μ ν -->
426<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin></code></pre>
427 </section>
428
429 <section>
430 <h2>6. SEO 체ν¬λ¦¬μ€νΈ</h2>
431 <ul class="checklist">
432 <li>λͺ¨λ νμ΄μ§μ κ³ μ ν titleκ³Ό description μ€μ </li>
433 <li>h1 νκ·Έλ νμ΄μ§λΉ νλλ§ μ¬μ©</li>
434 <li>μ΄λ―Έμ§μ alt μμ± μΆκ°</li>
435 <li>λͺ¨λ°μΌ μΉνμ μΈ λ°μν λμμΈ</li>
436 <li>HTTPS μ¬μ©</li>
437 <li>μ¬μ΄νΈλ§΅(sitemap.xml) μμ±</li>
438 <li>robots.txt μ€μ </li>
439 <li>ꡬ쑰ν λ°μ΄ν° μΆκ°</li>
440 <li>νμ΄μ§ λ‘λ© μλ μ΅μ ν</li>
441 <li>λ΄λΆ λ§ν¬ ꡬ쑰 μ΅μ ν</li>
442 </ul>
443 </section>
444
445 <!-- FAQ μΉμ
(ꡬ쑰ν λ°μ΄ν°μ 맀μΉ) -->
446 <section>
447 <h2>μμ£Ό 묻λ μ§λ¬Έ</h2>
448
449 <details>
450 <summary><strong>SEOλ 무μμΈκ°μ?</strong></summary>
451 <p>SEO(Search Engine Optimization)λ κ²μ μμ§ μ΅μ νμ μ½μλ‘, μΉμ¬μ΄νΈκ° κ²μ κ²°κ³Όμμ λ λμ μμλ₯Ό μ°¨μ§νλλ‘ μ΅μ ννλ κ³Όμ μ
λλ€.</p>
452 </details>
453
454 <details>
455 <summary><strong>λ©ν νκ·Έκ° μ μ€μνκ°μ?</strong></summary>
456 <p>λ©ν νκ·Έλ κ²μ μμ§μ νμ΄μ§μ λ΄μ©μ μλ €μ£Όκ³ , κ²μ κ²°κ³Όμ νμλ μ λͺ©κ³Ό μ€λͺ
μ μ 곡ν©λλ€. μ μ ν λ©ν νκ·Έλ ν΄λ¦λ₯ (CTR)μ λμΌ μ μμ΅λλ€.</p>
457 </details>
458 </section>
459 </article>
460 </main>
461
462 <footer>
463 <p>© 2024 WebDev Study. All rights reserved.</p>
464 <p>SEOμ λν΄ λ μμ보기: <a href="https://developers.google.com/search" target="_blank" rel="noopener">Google Search Central</a></p>
465 </footer>
466</body>
467</html>