WordPress에서 스키마 마크업을 구현하기 위한 빠른 가이드
게시 됨: 2020-05-13당신은 아름다운 외모와 훌륭한 기능을 갖춘 웹사이트를 시작했습니다. 다음은 무엇입니까? 검색 엔진에서 콘텐츠의 순위를 지정하여 유기적 트래픽을 가져오는 SEO 친화적으로 만드십시오. 소화하기 쉽지는 않지만 이해해야 할 기술적인 요소가 많기 때문에 다소 어려운 작업처럼 보일 수 있습니다. 그러나 웹 사이트의 SEO에 대해 진지한 경우 모든 SEO 관련 주제에 대한 전체적인 관점이 필요합니다. 그러한 주제 중 하나는 스키마 마크업을 구현하는 것입니다.
Scheme Markup과 구조화된 데이터는 수년 동안 SEO에서 좋은 역할을 했으며 Google, Bing, Yahoo 등과 같은 주요 검색 엔진에서 권장하는 것 같습니다. 그러나 스키마 마크업은 정확히 무엇이며 사이트의 SEO 프로세스에 어떤 영향을 미칩니까? 이 기사를 읽고 나면 그것이 무엇인지, SEO와 검색 엔진에 어떤 영향을 미치는지, 더 나은 순위를 얻기 위해 올바르게 구현하는 방법을 정확히 알게 될 것입니다.
구조화된 데이터 및 스키마 마크업이란 무엇입니까?
구조화된 데이터는 보편적으로 이해할 수 있는 정보 형식입니다. 여기에는 검색 엔진이 페이지의 모든 내용을 쉽게 알 수 있도록 하는 다양한 요소가 포함되어 있습니다.
스키마 마크업은 기본적으로 웹사이트를 검색 엔진에 표시하는 코드입니다. 주요 목적은 검색 엔진을 사용자에게 더 많은 정보를 제공하는 것입니다.
날짜, 이미지, 영업 시간 등과 같은 다양한 요소를 정의하는 코드 형태로 웹 페이지에 추가할 수 있습니다.
SEO에서 스키마 마크업의 이점
SEO와 관련하여 스키마 마크업에 표시되는 구조화된 데이터는 검색 엔진 결과를 보다 자세하고 유익한 방식으로 표시합니다. 웹사이트를 보다 SEO 친화적으로 만들 뿐만 아니라 풍부한 결과를 표시하여 웹사이트로 더 많은 트래픽을 유치할 수 있습니다.
검색 엔진에 표시되는 다양한 유형의 리치 결과
이전에 검색 엔진에 리치 결과를 표시하기 위한 스키마 마크업의 이점에 대해 논의했습니다. 다음은 웹사이트에 스키마 마크업이 구현된 경우 검색 엔진에 표시되는 일부 리치 결과입니다.
리치 스니펫
리치 스니펫은 검색 결과에 표시되는 동안 평점, 리뷰, 이미지 등과 같은 추가 정보가 포함된 결과입니다. 사용자가 페이지/게시물에 대해 더 많이 알고 클릭할 수 있는 기회를 더 많이 제공하는 데 도움이 됩니다.
리치 카드
리치 카드는 검색 엔진에 결과를 표시하기 위한 새로운 형식입니다. 리치 스니펫과 마찬가지로 리치 카드는 스키마 마크업을 사용하여 더 매력적이고 시각적으로 매력적인 형식으로 검색 결과를 표시합니다. 더 나은 모바일 검색 경험을 제공하는 데 중점을 두고 있으며 터치 친화적인 스와이프 옵션이 제공됩니다.
지식 정보
지식 그래프는 이미지, 위치, 연락처 정보, 설명, 소셜 미디어 프로필을 표시하여 정보를 더욱 상세하게 만들기 위해 검색 엔진에서 사용되는 지식 기반입니다.
추천 스니펫
추천 스니펫은 사용자에게 질문에 대한 직접적인 답변을 제공하는 검색 엔진 형식입니다. 여기에는 리치 스니펫과 같은 추가 정보가 포함되어 있지 않지만 특정 결과를 클릭하지 않고도 사용자에게 간결한 답변을 제공합니다.
내 웹 페이지에서 스키마 마크업 구현을 시작하려면 어떻게 해야 합니까?
다양한 방식으로 스키마 마크업을 구현할 수 있습니다. 다음은 그 중 일부입니다.
마이크로데이터를 사용하여 스키마 추가:
Microdata는 HTML 요소에 기계가 읽을 수 있는 태그로 주석을 추가하는 간단한 방법을 제공하기 위해 HTML5에 도입된 태그 세트입니다. 초보자가 구현하기에 좋은 마크업을 사용하기가 상당히 쉽습니다. 그러나 단점은 지저분해질 수 있는 웹 페이지 본문 내에서 각 항목을 개별적으로 마크업해야 한다는 것입니다.
그러나 시작하기 전에 웹 페이지에서 정의하는 항목 유형을 파악해야 합니다. 어떤 유형의 태그를 사용해야 하는지 결정하는 데 도움이 됩니다.
여기에서는 HashThemes라는 온라인 상점을 소유하고 있으며 홈 페이지는 다음과 같다고 가정합니다.
<div> <h1>해시테마</h1> <h2>최고의 WordPress 테마 판매자!</h2> <p>주소:</p> <p>도비갓</p> <p>네팔 랄리트푸르</p> <p>이메일: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">최고의 WordPress 테마를 보려면 여기를 클릭하십시오!</a></p> <p>영업 중입니다: </p> <p>월-금 오전 10시 - 오후 6시</p> </div>
먼저 웹 페이지의 섹션을 식별해야 합니다. <div> 태그 사이의 모든 것입니다. 그래서 우리는 추가합니다
<div 항목 범위>
항목 범위 태그를 추가하여 특정 항목을 참조하도록 <div> 태그 블록 사이에 포함된 HTML을 지정할 수 있습니다.
이제 item type 속성을 사용하여 페이지의 항목 유형을 지정합니다.
<div itemscope itemtype = "http://schema.org/wordpressthemes">
이제 홈 페이지로 이동하여 웹사이트 이름이 있는 웹페이지 부분에 태그를 지정합니다. 여기에 항목의 속성에 레이블을 지정하는 item prop 태그를 추가합니다.
<h1 itemprop="name">해시테마</h1>
나머지 페이지에도 태그를 추가하세요.
때로는 전체 행에 태그를 지정할 필요가 없지만 이메일 주소 행에서 속성이 참조되는 행의 비트 부분을 태그할 필요가 있습니다.
<h2 itemprop="description">최고의 WordPress 테마 판매자!</h2> <p>주소:</p> <span itemprop="주소" itemscope itemtype="http://schema.org/PostalAddress"> <p itemprop="streetAddress">도비하트</p> <p itemprop="addressLocality">네팔 랄리트푸르</p></span> <p>이메일: <span itemprop="email">[email protected]</span></p> <p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">최고의 WordPress 테마를 보려면 여기를 클릭하십시오!</a></p> <p>영업 중입니다:</p> <p itemprop="openingHours">월-금 오전 10시 - 오후 6시</p> </div>
또한 Google 구조화된 데이터 마크업 도우미를 사용하여 웹페이지에 더 쉽게 태그를 지정할 수 있습니다.
RDFa를 사용하여 마크업 추가
RDFa(Resource Description Framework in Attributes)는 구조화된 데이터를 마크업하는 데 도움이 되도록 설계된 HTML5의 확장입니다. W3C 권장 사항이며 Schema.org를 넘어서는 구조화된 데이터를 추가하기 위해 여러 구조화된 데이터 어휘를 결합하는 데 사용할 수 있습니다.
Schema.org에서 Microdata 마크업을 사용하는 방법을 안다면 RDFa도 다르지 않을 것입니다. 콘텐츠 본문에 기존 HTML을 통합합니다.
위의 전자 상거래 사이트를 예로 들어 보겠습니다.
<div> <h1>해시테마</h1> <h2>최고의 WordPress 테마 판매자!</h2> <p>주소:</p> <p>도비갓</p> <p>네팔 랄리트푸르</p> <p>이메일: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">최고의 WordPress 테마를 보려면 여기를 클릭하십시오!</a></p> <p>영업 중입니다: </p> <p>월-금 오전 10시 - 오후 6시</p> </div>
여기에서는 URL http://schema.org/와 함께 vocab 태그를 지정합니다. 페이지 유형은 태그 유형으로 정의됩니다.
<div vocab="http://schema.org/" typeof="store">
이제 검색 엔진에 페이지가 무엇인지 알려 주었습니다. 이제 속성 속성을 사용하여 속성을 정의할 차례입니다.
<h1 property="name">해시테마</h1>
속성 유형은 PostalAddress 정의와 같이 속성을 추가로 정의하는 데 사용할 수도 있습니다.
<div 속성="주소" typeof="우편 주소">
속성의 유형은 Microdata의 항목 유형과 동일하고 속성은 item prop 속성과 동일합니다.
<h2 property="description">최고의 WordPress 테마 판매자!</h2> <p>주소:</p> <div 속성="주소" typeof="우편 주소"> <p property="streetAddress">도비가트</p> <p property="addressLocality">네팔 랄리트푸르</p> </div> <p>이메일: <span property="email">[email protected]</span></p> <p><a property="store" href="https://hashthemes.com/wordpress-theme/">최고의 WordPress 테마를 보려면 여기를 클릭하십시오!</a></p> <p>영업 중입니다:</p> <p property="openingHours">월-금 오전 10시 - 오후 6시</p> </div>
JSON-LD를 사용한 마크업 웹페이지
JavaScript Object Notation for Linked Data(JSON-LD)는 JSON을 사용하여 연결된 데이터를 인코딩하는 것입니다. W3C 권장 사항이며 2013년 Schema.org의 권장 형식으로 추가되었습니다.
스키마 마크업에 JSON-LD를 사용하는 주요 이점은 가장 관련성이 높은 코드를 페이지 헤더로 제한하고 추가 태그를 콘텐츠 본문에서 제외한다는 것입니다. 이것은 코드를 더 깔끔하고 읽기 쉽게 만듭니다.
JSON – LD 표기법은 스크립트 블록 안에 포함되어 있습니다. 따라서 프로세스를 시작하기 위해 스크립트 라인을 입력하여 JSON-LD 형식을 사용하고 있음을 보여줍니다.
<스크립트 유형="응용 프로그램/ld+json">
JSON-LD 코드는 중괄호(중괄호) 안에 포함되어야 하며 그렇지 않으면 페이지에 적용되지 않거나 검색 엔진에서 구문 분석되지 않습니다. 이것은 자바스크립트에서 객체 구조로 알려져 있습니다. 따라서 코드의 개요는 다음과 같습니다.
<스크립트 유형="응용 프로그램/ld+json"> 코드는 여기에 간다 </스크립트>
이제 Schema.org에 연결된 데이터에 어휘로 정의된 컨텍스트를 사용해야 합니다.
코드의 각 줄에도 쉼표가 있어야 합니다.
"@context": "http://schema.org",
다른 유형의 schema.org 형식의 경우 마크업할 콘텐츠 유형을 정의해야 합니다. 이는 Microdata의 이미지 유형 속성 및 RDFa의 속성 유형과 동일합니다.
위에서 언급한 간단한 웹 사이트를 예로 사용합니다.
"@type": "저장",
이제 상점의 이름과 설명을 정의합니다. Microdata 또는 RDFa를 사용하여 이러한 요소를 정의하는 경우 웹사이트 홈페이지 자체에 표시되어야 합니다. 그러나 JSON-LD의 경우 페이지에 표시되지 않고도 요소를 정의할 수 있습니다.
"이름": "해시테마", "설명": "최고의 WordPress 테마 판매자!",
이제 주소를 정의할 차례입니다. 주소에는 도로명 주소 및 지역과 같은 더 정확한 속성이 추가로 포함됩니다. 그래서 우리는 그것들을 중괄호 안에 넣을 것입니다.
"주소": {
"@type": "우편 주소",
"addressLocality": "네팔 랄리트푸르",
"streetAddress": "Dhobighat",
},이제 매장 영업시간을 알려드리겠습니다. 배열에 영업 시간을 유지하고 요일을 두 글자 조합으로 지정합니다. 또한 시간은 24시간제여야 합니다.
"개관 시간": [ "월-금 10:00-18:00" ],
마지막으로 이메일 주소와 테마 URL을 추가합니다. 둘 다 아주 간단합니다.
"이메일": "[email protected]" "스토어": "https://hashthemes.com/wordpress-theme/" 그리고 마지막에 우리의 마크업은 다음과 같을 것입니다: <스크립트 유형="응용 프로그램/ld+json"> { "@context": "http://schema.org", "@type": "저장", "이름": "해시테마", "설명": "최고의 WordPress 테마 판매자!", "주소": { "@type": "우편 주소", "addressLocality": "네팔 랄리트푸르", "streetAddress": "Dhobighat", }, "개관 시간": [ "월-금 10:00-18:00" ], "이메일": "[email protected]" "스토어": "https://hashthemes.com/wordpress-theme/" } </스크립트>
Google의 구조화된 데이터 테스트 도구를 사용하여 구문에 오류가 있는지 확인할 수 있습니다.
WordPress 웹 사이트에서 스키마 마크업을 구현하는 방법은 무엇입니까?
스키마 마크업의 구현은 다양한 방법으로 수행할 수 있습니다. 그들을 따라 웹사이트를 SEO 친화적으로 만들고 검색 엔진에서 콘텐츠 순위를 높일 수 있습니다. 다음은 그 중 일부입니다.
스키마 마크업과 통합이 내장된 WordPress 테마 선택:
아시다시피 WordPress는 많은 수의 템플릿으로 구성된 가장 인기 있는 플랫폼으로 짧은 시간에 매력적인 웹사이트를 만들 수 있습니다. 그러나 스키마 마크업 코드와 통합되는 테마는 소수에 불과합니다. 따라서 웹 존재를 시작하거나 기존 웹 사이트를 개조하기 위해 WordPress 테마를 선택하는 경우 테마에 최소한 일반적인 스키마 기능이 포함되어 있는지 확인하십시오. 공통 스키마에는 검색 엔진이 웹사이트의 구조를 이해할 수 있도록 하는 머리글, 바닥글 및 탐색 옵션이 포함됩니다.
WordPress 플러그인으로 다른 스키마 데이터 마크업
위에서 언급했듯이 Schema MarkUp 코드와 완전히 통합된 WordPress 테마를 찾는 데 어려움을 겪을 수 있습니다. 따라서 대안으로 웹 사이트에 스키마 기능을 추가하는 데 사용할 수 있는 WordPress 플러그인을 선택할 수 있습니다. Yoast SEO 및 Schema Pro는 웹사이트에서 Schema MarkUp을 구현하는 데 도움이 되는 몇 가지 플러그인입니다.
스키마 마크업을 구현하는 동안 기억해야 할 사항
이제 WordPress 웹 사이트에서 스키마 마크업을 구현하는 방법을 알았으므로 스키마 마크업을 구현하는 동안 기억해야 할 몇 가지 사항이 있습니다.
스키마 마크업을 통합하면 좋은 순위가 보장되지 않을 수 있음
스키마 마크업만으로는 웹 콘텐츠의 좋은 순위를 보장할 수 없습니다. 콘텐츠 권위, 콘텐츠 품질, 키워드 분석, 관련성 등과 같은 순위에 영향을 미치는 다른 많은 요소가 있습니다. 따라서 스키마 마크업은 콘텐츠 순위를 높이는 데 도움이 되는 요소 중 하나일 뿐입니다.
스키마 마크업이 적용되려면 시간이 걸립니다.
Schema Markup이 즉시 적용되는지 궁금하다면 오산입니다. 검색 결과에서 리치 스니펫을 보려면 몇 달이 걸립니다.
WordPress 테마에서 제공하는 스키마 마크업을 확인하고 이에 따라 플러그인을 사용하여 기능 향상
대부분의 WordPress 테마는 머리글 및 바닥글, 탐색과 같은 일반적인 스키마만 사용합니다. 다른 스키마 관련 구현 기능이 있는 일부 템플릿이 있을 수 있습니다. Google Structured Data Testing Tool로 이동하여 웹사이트의 스키마 구현을 분석하고 그에 따라 플러그인을 선택할 수 있습니다.