[4] Blooger SEO - JSON-LD를 통한 SEO 향상방법

JSON-LD란?

JSON-LD(JavaScript Object Notation for Linked Data)는 웹페이지에 구조화된 데이터를 추가하기 위한 데이터 형식입니다. Google에서 공식적으로 권장하는 방식으로, 주로 Schema.org와 함께 사용되며 검색 엔진이 웹페이지의 콘텐츠를 더 잘 이해할 수 있도록 돕습니다.

---

JSON-LD의 장점

1. Google이 권장하는 방식:

   • 검색 엔진 최적화를 위해 구조화된 데이터를 추가할 때 가장 선호되는 방법입니다.

2. 리치 결과(Rich Results) 표시 가능:

   • 검색 결과에 별점, 가격, 리뷰, FAQ 등 추가 정보를 표시해 클릭률(CTR)을 증가시킵니다.

3. 코드와 콘텐츠의 분리:

   • JSON-LD는 HTML과 독립적으로 동작하므로 페이지 코드를 깔끔하게 유지할 수 있습니다.

4. 유지 보수 용이성:

   • 데이터를 업데이트하거나 수정할 때 다른 구조화된 데이터 방식보다 간단합니다.

5. SEO 강화 효과:

   • 구조화된 데이터를 제공함으로써 검색 엔진이 페이지 콘텐츠를 명확히 이해하고 관련 검색어에 노출될 가능성을 높입니다.

---

지원하는 검색엔진

• Google: JSON-LD를 공식적으로 지원하며 가장 권장되는 구조화된 데이터 형식입니다.
• Bing: JSON-LD를 지원하며, 콘텐츠 이해와 SEO에 활용합니다.
• Yahoo: Bing 검색 기술을 사용하기 때문에 JSON-LD 지원이 가능합니다.
• Yandex: JSON-LD를 통해 페이지 데이터를 처리할 수 있습니다.

아쉽게도 한국 검색엔진은 지원하지 않음

---

Blogger에서 적용하는 방법

• 아래코드를 head tag 위에 적용한다
  • 테마 > HTML 설정 수정 > head tag 위에 적용

<b:if cond='data:view.isPost and not data:view.isHomepage and not data:view.isArchive'>
  <!-- FeaturedPost 위젯에서 JSON-LD 렌더링 제외 -->
  <!--b:if cond='not data:widget or not contains(data:widget.id, "FeaturedPost")'-->
  <b:if cond='data:view.isPost and contains(data:widget.class, "Blog")'>
    <script type='application/ld+json'>
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": "<data:post.title/>",
      "description": "<data:post.snippet/>",
      "author": {
        "@type": "Person",
        "name": "<data:blog.author default='Unknown Author'/>",
        "url": "<data:blog.homepageUrl default='https://warguss.blogspot.com'/>"
      },
      "datePublished": "<data:post.date/>",
      "dateModified": "<data:post.updated/>",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "<data:post.url/>"
      },
      "image": "<data:post.featuredImage/>",
      "keywords": "<data:post.labels/>",
      "articleSection": "<data:post.labels/>"
    }
    </script>
  </b:if>
</b:if>

• JsonLD 적용 여부 검사
  • 구글 검사 사이트

• 위 스샷 상태면 적용됨
• WordPress면 Plugin으로 간단 적용되지만.. Blogger는 수동으로 해줘야함..ㅜ

---

Related Links

---

# JSON-LD란?

**JSON-LD**(JavaScript Object Notation for Linked Data)는 웹페이지에 구조화된 데이터를 추가하기 위한 데이터 형식입니다. Google에서 공식적으로 권장하는 방식으로, 주로 **Schema.org**와 함께 사용되며 검색 엔진이 웹페이지의 콘텐츠를 더 잘 이해할 수 있도록 돕습니다.

---

## JSON-LD의 장점

1. **Google이 권장하는 방식**:
	- 검색 엔진 최적화를 위해 구조화된 데이터를 추가할 때 가장 선호되는 방법입니다.

2. **리치 결과(Rich Results) 표시 가능**:
	- 검색 결과에 별점, 가격, 리뷰, FAQ 등 추가 정보를 표시해 클릭률(CTR)을 증가시킵니다.

3. **코드와 콘텐츠의 분리**:
	- JSON-LD는 HTML과 독립적으로 동작하므로 페이지 코드를 깔끔하게 유지할 수 있습니다.

4. **유지 보수 용이성**:
	- 데이터를 업데이트하거나 수정할 때 다른 구조화된 데이터 방식보다 간단합니다.

5. **SEO 강화 효과**:
	- 구조화된 데이터를 제공함으로써 검색 엔진이 페이지 콘텐츠를 명확히 이해하고 관련 검색어에 노출될 가능성을 높입니다.

---

## 지원하는 검색엔진

- **Google**: JSON-LD를 공식적으로 지원하며 가장 권장되는 구조화된 데이터 형식입니다.
- **Bing**: JSON-LD를 지원하며, 콘텐츠 이해와 SEO에 활용합니다.
- **Yahoo**: Bing 검색 기술을 사용하기 때문에 JSON-LD 지원이 가능합니다.
- **Yandex**: JSON-LD를 통해 페이지 데이터를 처리할 수 있습니다.

아쉽게도 한국 검색엔진은 지원하지 않음

---

## Blogger에서 적용하는 방법
- 아래코드를 head tag 위에 적용한다
	- 테마 > HTML 설정 수정 > head tag 위에 적용

<pre class="brush:xml"
class="brush:plain; gutter:true">
&lt;b:if cond='data:view.isPost and not data:view.isHomepage and not data:view.isArchive'&gt;
  &lt;!-- FeaturedPost 위젯에서 JSON-LD 렌더링 제외 --&gt;
  &lt;!--b:if cond='not data:widget or not contains(data:widget.id, &quot;FeaturedPost&quot;)'--&gt;
  &lt;b:if cond='data:view.isPost and contains(data:widget.class, &quot;Blog&quot;)'&gt;
    &lt;script type='application/ld+json'&gt;
    {
      &quot;@context&quot;: &quot;https://schema.org&quot;,
      &quot;@type&quot;: &quot;BlogPosting&quot;,
      &quot;headline&quot;: &quot;&lt;data:post.title/&gt;&quot;,
      &quot;description&quot;: &quot;&lt;data:post.snippet/&gt;&quot;,
      &quot;author&quot;: {
        &quot;@type&quot;: &quot;Person&quot;,
        &quot;name&quot;: &quot;&lt;data:blog.author default='Unknown Author'/&gt;&quot;,
        &quot;url&quot;: &quot;&lt;data:blog.homepageUrl default='https://warguss.blogspot.com'/&gt;&quot;
      },
      &quot;datePublished&quot;: &quot;&lt;data:post.date/&gt;&quot;,
      &quot;dateModified&quot;: &quot;&lt;data:post.updated/&gt;&quot;,
      &quot;mainEntityOfPage&quot;: {
        &quot;@type&quot;: &quot;WebPage&quot;,
        &quot;@id&quot;: &quot;&lt;data:post.url/&gt;&quot;
      },
      &quot;image&quot;: &quot;&lt;data:post.featuredImage/&gt;&quot;,
      &quot;keywords&quot;: &quot;&lt;data:post.labels/&gt;&quot;,
      &quot;articleSection&quot;: &quot;&lt;data:post.labels/&gt;&quot;
    }
    &lt;/script&gt;
  &lt;/b:if&gt;
&lt;/b:if&gt;
</pre>


- JsonLD 적용 여부 검사
	- [구글 검사 사이트](https://search.google.com/test/rich-results?hl=ko)

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdGeZdWSlFbChe_ro3pmjTU0ICS5LU4w9MO0IL-QqoKNZuBZzaJyDfVbmt064LZcjEYWZUh3W4k21hIpsmnVPgPI2tsbzKJMCZDZ2YDWkZ-eRAiMgoAl5PwCD0pkdi0wXzeTL9zNQsIi-Wes0hY8lWuEMtgsntlmd59swGNS9DDcxSY8GY_HRAYrS/s1600/JSONLD.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="JsonLD 적용 여부 검사" border="0" data-original-height="703" data-original-width="1103" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdGeZdWSlFbChe_ro3pmjTU0ICS5LU4w9MO0IL-QqoKNZuBZzaJyDfVbmt064LZcjEYWZUh3W4k21hIpsmnVPgPI2tsbzKJMCZDZ2YDWkZ-eRAiMgoAl5PwCD0pkdi0wXzeTL9zNQsIi-Wes0hY8lWuEMtgsntlmd59swGNS9DDcxSY8GY_HRAYrS/s1600-rw/JSONLD.PNG"/></a></div>


- 위 스샷 상태면 적용됨
- WordPress면 Plugin으로 간단 적용되지만.. Blogger는 수동으로 해줘야함..ㅜ

---

<!-- 목록을 표시할 HTML 컨테이너 -->
<div>
    <h3>Related Links</h3>
    <ul id="label-post-list">
        <!-- 여기에 '주식' 라벨의 게시물 목록이 추가됩니다 -->
    </ul>
</div>

---