프로그래밍 방식으로 WordPress에 스키마 마크업을 추가하는 방법

게시 됨: 2022-04-21

프로그래밍 방식으로 WordPress에 스키마 마크업을 추가 하시겠습니까? 그렇다면 WordPress 웹 사이트에 다양한 방법으로 여러 코드 조각을 사용할 수 있습니다.

그러나 추가하는 방법을 살펴보기 전에 스키마 마크업이 무엇을 의미하는지 간단히 살펴보겠습니다.

스키마 마크업이란 무엇입니까?

스키마 마크업은 schema.org에서 제공하는 표준화된 데이터 구조입니다. 기본적으로 현재 페이지에 대한 정보를 검색 엔진에 제공합니다 . 따라서 크롤러 봇은 콘텐츠가 무엇인지 이해하고 검색 결과에 리치 스니펫을 작성할 수 있습니다.

스키마에 포함된 데이터는 [“전화”: “152234029”]와 같은 키-값 쌍으로 표시됩니다. 또한 여러 수준의 상속을 가질 수 있습니다. 웹사이트의 클릭률(CTR) 을 높이는 데 매우 중요하며 최고의 SEO 사례 중 하나로 간주됩니다.

스키마와 함께 사용할 수 있는 여러 유형의 키 속성이 있습니다. 개방형 및 폐쇄형 계층을 기반으로 하는 데이터 및 데이터 유형과 다릅니다. 현재 사용할 수 있는 모든 유형을 찾으려면 shcema.org 웹사이트 를 방문하십시오.

프로그래밍 방식으로 WordPress에 스키마 마크업을 추가하는 방법은 무엇입니까?

이전 게시물에서 플러그인을 사용하여 WordPress에 스키마를 추가하는 방법에 대해 이야기했습니다. 마찬가지로 대시보드와 테마를 통해 WordPress에 스키마 마크업을 추가하는 몇 가지 더 많은 방법을 이미 논의했습니다.

그러나 이제 프로그래밍 방식으로 동일한 결과를 얻는 방법을 배울 것입니다. 이렇게 하면 플러그인이 제공하는 모든 추가 코드를 웹사이트에 로드할 필요가 없습니다. 그리고 웹사이트에 필요한 코드만 추가하게 됩니다.

콘텐츠에 스키마를 포함하려면 웹사이트 HTML 출력에 스키마 태그를 추가해야 합니다. 여러 가지 방법으로 웹사이트의 HTML을 편집할 수 있습니다. 가장 좋은 방법은 자식 테마의 테마 템플릿 파일을 덮어쓰는 것입니다.

프로그래밍 방식으로 스키마 마크업을 포함하려면 자식 테마가 필요합니다. 따라서 아직 설치하지 않은 경우 하위 테마를 만들고 설치하십시오. 자식 테마 플러그인 중 하나를 사용하여 만들 수도 있습니다.

두 가지 주요 방법으로 프로그래밍 방식으로 WordPress에 스키마 마크업을 추가할 수 있습니다.

  1. 머리에 JSON-LD 파일 추가
  2. HTML 출력에 마이크로데이터 마크업 추가

둘 다 유효한 방법이며 필요에 더 잘 맞는 방법을 자유롭게 사용할 수 있습니다.

1. JSON-LD 파일 추가

JSON-LD 파일 은 JSON을 기반으로 하는 특정 형식의 형식으로 연결된 데이터를 인코딩하는 데 사용됩니다. JSON 파일에서 발생하는 것처럼 키-값 쌍 목록이 포함되어 있습니다.

 {
    "전화": "152234029",
    "이름": "이름",
    "주소": "요한 스트리트 N 433",
    "url": "https://QuadLayers.com",
    "가격 범위": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "LocalBusiness"
}

보시다시피 구문조차도 JSON 파일과 매우 유사합니다.

필요에 더 잘 적응하는 파일을 얻기 위해 사용할 수 있는 여러 JSON-LD 생성기가 있습니다.

따라서 다음 단계는 이 코드를 웹사이트의 HTML <head> 섹션에 인쇄하는 것입니다.

이를 달성하기 위해 하위 테마의 functions.php 파일에 다음 기능을 사용할 수 있습니다.

참고: 계속하기 전에 웹사이트도 백업해야 합니다. 우리는 귀하의 웹사이트의 핵심 파일을 수정할 것이며 원치 않는 변경은 웹사이트에 더 많은 문제를 일으킬 수 있습니다.

 add_action('wp_head','QuadLayers_add_schema');
함수 QuadLayers_add_schema(){
echo '<스크립트 유형="응용 프로그램/ld+json">
{
"전화": "152234029",
"이름": "이름",
"주소": "요한 스트리트 N 433",
"url": "https://QuadLayers.com",
"가격 범위": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "LocalBusiness"
}';
}

JSON-LD 파일이 <script> 태그에 어떻게 포함되어 있는지 확인할 수 있습니다. 파일을 업데이트하는 것을 잊지 마십시오.

스키마 작동 방식을 이해하려면 이전 샘플 코드에서 웹 사이트의 모든 페이지에 JSON을 추가합니다. 따라서 검색 엔진이나 다른 종류의 봇이 이를 읽을 때 스크립트가 있는 모든 페이지에 대해 유효한 스키마로 설정됩니다. 이 경우 전체 웹 사이트입니다.

PHP 함수에 일부 조건부 논리를 적용하여 JSON 코드를 특정 페이지에 적용할 수 있습니다. 그러나 스키마 마크업은 콘텐츠의 내부 HTML에 포함될 수도 있으므로 매우 구체적인 콘텐츠에 복잡한 마크업을 포함할 수 있습니다.

2. HTML에 마이크로데이터 마크업 추가

현대의 추세에 따라 이전 방법을 권장합니다. 그러나 마이크로데이터 마크업을 사용 하면 템플릿 파일에 바로 스키마 마크업을 포함할 수 있습니다.

자식 테마의 functions.php 파일에 스크립트를 붙여넣는 것도 잘 작동합니다. 콘텐츠의 각 부분에 올바른 스키마를 적용하려면 결국 크고 복잡한 코드 부분을 갖게 됩니다.

따라서 HTML 내에 마이크로데이터 마크업을 추가하려면 WordPress 웹사이트의 템플릿 파일을 덮어써야 합니다.

2.1. WP 게시물에 스키마 마크업 추가

이 예에서 자식 테마는 Twenty Twenty-One 테마를 상속하므로 덮어써야 하는 파일은 content-single.php 입니다. 이것은 HTML 출력에 바로 스키마를 추가할 수 있는 파일입니다.

이 파일은 일부 테마의 다른 이름이나 폴더에서 찾을 수 있습니다.

하위 테마에 필요한 폴더(템플릿 부분 및 콘텐츠)와 콘텐츠 폴더 안에 새로운 content-single.php 파일을 만듭니다.

 하위 테마
/__템플릿 부품
__/__콘텐츠
__/__/__content-single.php

상위 테마 content-single.php 파일의 모든 코드를 복사/붙여넣기 합니다.

게시물 템플릿 파일 덮어쓰기

우리가 수정할 코드는 다음과 같습니다.

 <기사 <?php post_class(); ?>>

다음 스니펫과 같이 스키마 범위 및 유형을 추가합니다.

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

이것은 <article> HTML 태그 내의 콘텐츠가 기사 유형임을 검색 엔진에 알리는 것입니다.
유형과 범위를 선언한 후 몇 가지 표준 속성을 사용할 수 있습니다. 예를 들어 게시물 제목을 항목 이름으로 선언하면 다음과 같습니다.

소스 코드:

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

이름 속성 추가:

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

또한 articleBody 키 속성을 사용하여 게시물의 내용을 표시할 수 있습니다.

소스 코드:

 <div class="항목 내용">
<?php 

콘텐츠();

articleBody 속성 추가:

 <div itemprop="articleBody" class="entry-content">
<?php
콘텐츠();

2.2. WooCommerce 제품에 스키마 마크업 추가

비슷한 방식으로 스키마를 포함하기 위해 WooCommerce 제품 템플릿 파일을 덮어쓸 수 있습니다.

덮어써야 할 파일은 content-single-product.php 파일입니다. 이 파일은 하위 테마의 WooCommerce 폴더 에 있어야 합니다. 찾기 어려우시면 WooCommerce도 제대로 설정했는지 확인하세요.

 하위 테마
__/우커머스
__/__content-single-product.php

그 자리에 새 파일을 생성하는 것과 동일한 과정을 완료합니다.

기본 div 래퍼에서 범위 및 스키마 유형을 정의합니다.

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

이 파일에서 "description" 속성을 사용할 수도 있습니다.

 <div itemprop="description" class="요약 항목-요약">

그러나 제품에 더 많은 마크업을 추가하려면 다른 파일을 덮어써야 합니다.

예를 들어 제품 가격을 스키마에 추가하려면 하위 테마 파일에 새 경로를 생성합니다.

woocommerce/templates/single-product/price.php

 하위 테마
__/우커머스
__/__/단일 제품
__/__/__/price.php

우커머스 템플릿 파일 덮어쓰기

price.php 파일을 복사한 후 다음과 같이 편집합니다.

소스 코드:

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

마크업 추가:

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php 에코 $product->get_price_html(); ?></p>

가격을 정의하기 위해 "제안" 유형으로 새 항목을 만들었습니다. 원래 HTML 구조에 따라 서로 다른 항목 유형을 중첩하는 방법을 이해하는 데 단서입니다.

더 많은 마크업을 포함하기 위해 덮어쓸 수 있는 다른 파일이 있습니다.

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

결론

이것으로 프로그래밍 방식으로 워드프레스에 스키마 마크업을 추가하는 방법에 대한 튜토리얼이 끝납니다. 그렇게 하려면 일부 프로그래밍 지식과 함께 스키마가 작동하는 방식에 대한 기본적인 이해가 필요합니다.

또한 모든 속성 및 유형이 schema.org 웹사이트에 정의된 것과 일치해야 함을 이해하는 것이 매우 중요합니다. 여기에는 여러 수준의 상속이 있는 속성도 포함됩니다.

요약하면 다음 두 가지 주요 방법을 사용하여 웹사이트에 스키마를 추가할 수 있습니다.

  • 머리에 JSON-LD 파일 추가
  • HTML 출력에 마이크로데이터 마크업 추가

JSON-LD 파일을 추가하는 것은 매우 쉬운 접근 방식이며 대부분의 사용자가 고려합니다. 웹사이트의 <head> 섹션에 JSON-LD 코드를 인쇄하기만 하면 됩니다.

그러나 마이크로데이터 마크업 접근 방식을 사용하여 스키마 마크업을 템플릿 파일에 직접 포함하는 것도 매우 유용할 수 있습니다. 템플릿 파일을 덮어쓰면 필요한 리소스가 있는 경우 훨씬 더 유연하게 웹 사이트를 사용자 정의하는 데 도움이 될 수 있습니다. 게시물 및 WooCommerce 제품과 같은 웹사이트의 특정 요소에 스키마 마크업을 추가할 수도 있습니다.

이제 이 코드 조각을 사용하여 웹사이트에 스키마 마크업을 추가할 수 있습니까? 이 튜토리얼이 도움이 되었는지 댓글로 알려주십시오.

한편, 다음은 귀하가 관심을 가질 수 있고 WordPress 웹사이트를 개선하는 데 도움이 될 몇 가지 추가 게시물입니다.

  • 사용자 정의 WordPress 플러그인을 만드는 방법
  • WordPress에 Telegram 추가(전체 가이드)
  • WordPress에서 HTML을 편집하는 방법