SEO - Adding Schema Markup

What Is Schema Markup?

안녕하세요, 야심 찬 웹 개발자 여러분! 오늘 우리는 Schema Markup의 흥미로운 세상으로 뛰어들어 보겠습니다. 지금 당신이 떠오르는 것을 알고 있습니다 - "흥미로운? 정말로?" 하지만 믿어 주세요, 이게 웹사이트의 가시성을 높이는 방법을 보면, 첫 번째로 이를 발견했을 때 나처럼 흥분할 것입니다!

Schema Markup은 인터넷의 붐비는 콘서트 홀에서 웹사이트를 메가폰으로 만드는 것과 같습니다. 이는 HTML에 추가하는 마이크로데이터의 형태로, 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 도와줍니다. 이를 웹 페이지에 대한 자막을 제공하는 것으로 생각하면 됩니다 - 검색 엔진이 콘텐츠를 더 정확하게 읽고 해석하는 데 도움이 됩니다.

간단한 예를 보겠습니다:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">인셉션</h1>
<span itemprop="director">감독: 크리스托퍼 놀란</span>
<span itemprop="datePublished">발매일: 2010</span>
</div>

이 스니펫에서 우리는 이 div가 영화에 대한 정보를 포함하고 있음을 검색 엔진에 알리고 있습니다. itemscope와 itemtype 속성은 스키마의 범위와 유형을 정의하며, itemprop은 개별 속성을 지정합니다.

Adopting Schema Markup의 Advantages

이제 Schema Markup이 무엇인지 알고 있으므로, 왜 이 것이 훌륭한지 이야기해 보겠습니다:

Enhanced Search Results: Schema Markup은 검색 결과에서 리치 스니펫을 유도하여 사이트를 돋보이게 합니다.
Improved Click-Through Rates: 그 예쁜 리치 스니펫? 더 많은 클릭을 유도하는 경향이 있습니다!
Better Understanding by Search Engines: 검색 엔진이 콘텐츠를 더 정확하게 이해하는 데 도움이 됩니다.
Voice Search Optimization: 음성 검색이 성장함에 따라 구조화된 데이터가 점점 더 중요해집니다.

Different Varieties of Schema Code Languages

Schema Markup은 하나의 해결책으로 적용되지 않습니다. 다양한 방법으로 구현할 수 있습니다:

Format	Description	Example
Microdata	HTML attributes	`<div itemscope itemtype="http://schema.org/Person">`
RDFa	Extension to HTML5	`<div vocab="http://schema.org/" typeof="Person">`
JSON-LD	JavaScript notation embedded in a `<script>` tag	`<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Person" }</script>`

이 모든 형식이 유효하지만, JSON-LD는 구현과 유지보수의 용이성으로 인해 Google에서 일반적으로 선호됩니다.

Steps to Add Schema Markup On a Website for SEO

이제 손을 dirt하고 일을 시작해 보겠습니다! 웹사이트에 Schema Markup을 추가하는 방법을 알아보겠습니다:

1. Determine the Type of Content

먼저, 마킹할 콘텐츠 유형을 식별하세요. 이것은 기사인가요? 제품인가요? 지역 사업인가요? Schema.org에는 사용할 수 있는 종류의 포괄적인 목록이 있습니다.

2. Choose Your Markup Format

이 튜토리얼에서는 Google이 선호하는 형식인 JSON-LD를 사용하겠습니다.

3. Create Your Markup

예를 들어 블로그 게시물을 마킹하는 경우입니다. 다음은 예제입니다:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "How to Bake the Perfect Chocolate Chip Cookie",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2023-06-15",
"image": "http://example.com/cookie.jpg",
"articleBody": "First, cream together butter and sugar..."
}
</script>

이 스크립트는 이 페이지가 블로그 게시물을 포함하고 있음을 검색 엔진에 알리고 있습니다. 그리고 그 제목, 작성자, 발행일, 주요 이미지, 그리고 콘텐츠의 스니펫을 포함합니다.

4. Test Your Markup

라이브로 배포하기 전에 항상 Google의 Structured Data Testing Tool을 사용하여 마크업을 테스트하세요. 마크업의 스펠체크와 같은东西입니다!

5. Add the Markup to Your HTML

테스트가 완료되면, <script> 태그를 HTML의 <head> 섹션에 추가하세요.

6. Monitor Performance

구현 후, 검색 성능을 지켜보세요. 빛나는 리치 스니펫이 나타날 것입니다!

Conclusion

그렇습니다, 친구들! Schema Markup의 세상으로 첫 걸음을 냈습니다. 기억하세요, 인터넷은 큰 도서관이고, Schema Markup은 책에 자세한 색인을 추가하는 것과 같습니다. 이는 검색 엔진이 콘텐츠를 더 효과적으로 찾고 보여주는 데 도움이 됩니다.

웹 개발의 여정을 계속하면서, Schema Markup은 SEO 도구 상자에 있는 많은 도구 중 하나입니다. 하지만 이것은 중요한 도구이며, 이를 마스터하면 웹사이트가 검색 결과에서 큰 이점을 얻을 수 있습니다.

계속 실험하고, 배우고, 코드에 손을 대지 마세요. 얼마 지나지 않아 웹사이트가 검색 순위를 오르는 것을 보게 될 것입니다!

행복하게 코딩하고, 스키마가 함께 하기를 바랍니다!

Credits: Image by storyset