JSON-LD: 무엇이며 개발자가 사용하는 방법

10146 단어 htmlseometawebdev
지난 6주 동안 DEV는 검색엔진 최적화를 개선하고 사이트를 최선의 실천에 부합하도록 하는 데 전념했다.이 프로젝트의 팀원으로서 저는 SEO에 전심전력으로 몰입했습니다.
본고는 나의 지식을 추출하고 정리하고자 한다. 우리는 JSON-LD와 원 표기를 이용한 전통적인 실현을 간단하게 토론한 다음에 DEV가 어떻게 우리 사이트로 옮겨서 JSON-LD를 사용하는지 탐색할 것이다.

JSON. - 네?
JSON-LD는 링크된 데이터의 JavaScript 객체 개념을 나타냅니다.JSON-LD는 요소의 잘못된 뜻을 없애고 사이트의 데이터 구조를 간단하게 함으로써 그 사이트를 사용하는 페이지를 더욱 색인화하고 사이트의 SEO를 강화한다.페이지의 JSON-LD는 보통 페이지의 <script> 표지 중의 <head> 표지에서 찾을 수 있지만 <body> 표지에서 데이터를 찾는 것은 적지 않다.그러나 구조화된 데이터를 <head> 표지에 넣는 것이 최선의 방법으로 여겨진다. 파충류 프로그램은 보통 <head> 표지에서 메타데이터를 검색하기 시작하기 때문이다.
JSON-LD가 이렇게 유용한 이유는 문법이 사람과 기계를 쉽게 읽을 수 있기 때문이다.링크 데이터 형식은 키 값 쌍으로 구성되어 Schema.org 어휘표를 포함하고 구조화된 데이터에 사용되는 공유 어휘표이기 때문에 기계는 페이지 내용을 신속하게 해석할 수 있다.이용 패턴.조직 어휘표는 일련의 프로젝트 유형과 프로젝트 속성을 묘사할 수 있으며, 서로 다른 세부 유형은 부모 속성과 다른 유형에서 계승할 수 있다.
기본<script> 표기@context, @type와 주어진 대상의 속성-값 쌍을 제외하고 몇 가지 기본 속성이 일반적인 JSON-LD 구조를 구성했다.<script> 표기를 제외하고 기본 JSON-LD 구조를 구성하는 모든 기본 요소는 더블 따옴표“”로 포장하고 쉼표로 끝낼 수 있다.구조화된 데이터를 포함하는 <script> 표시는 항상 그 유형을 JSON-LD: <script type=“application/ld+json”> 로 지정합니다.<script> 태그와 유사하며 @context 속성은 항상 모드를 지정해야 합니다.조직: ”@context”: “Schema.org”,.데이터 구조를 구성하는 다른 기본 속성과 달리@type 구조의 속성-값은 항목의 유형과 속성에 따라 달라진다.
우리의 시각 학습자에 대해 나는 다음과 같은 예를 들어 개발 조직의 구조화된 데이터가 어떤 모양인지 설명한다.
<script type=“application/ld+json”>
{
"@context": "http://schema.org",
"@type": "Organization",
"mainEntityOfPage": {
   "@type": "WebPage",
    "@id": URL.organization(@organization)  
  },
  "url": URL.organization(@organization),
  "image": ProfileImage.new(@organization).get(width: 320),
  "name": @organization.name,
  "description": @organization.summary.presence || "404 bio not found"
}
</script>
상기 구조를 보면 JSON-LD 구조 구조를 구성하는 필수 속성: "<script type=“application/ld+json”>", "@context", "@type"을 볼 수 있습니다.또 일부 추가 속성-값은 필요한 정보를 가리키는데 우리 개발자의 목표는 검색 파충류(예를 들어 구글)의 잘못된 뜻을 없애는 것이다.

데이브. - 어떻게?
JSON-LD의 기초 지식과 사용된 어휘표를 소개했으니 DEV가 JSON-LD를 어떻게 사용해서 데이터를 구축하고 SEO를 향상시키는지 간단하게 소개할 때가 됐다.
지난 6주 동안 JSON-LD로 전환하기 전에 개발 코드 라이브러리는 지정<meta>과itemTypes 외에도 itemProp 표시에 의존했다. 이런 방법은 효과가 있지만 JSON-LD보다 효과가 좋지 않아 결과가 만족스럽지 않다.우리의 검색엔진 최적화가 안정됨에 따라 우리의 데이터를 더욱 구조화할 때가 되었다.솔루션 소개<meta>표시, itemType표시, itemProp표시를 사용하지 않고 JSON-LD로 데이터 구조를 구축한다.
JSON-LD로 전환하는 것이 좋습니다. 좋은 문서 기록이 있기 때문에 영감을 얻을 수 있는 예가 많고 구글 자체Google Structured Data Testing Tool와 같은 유용한 테스트 도구도 있습니다.패턴도 마찬가지다.org 어휘표의 문서는 해석하기 쉽고 항목 유형과 속성 예시도 많다.
그럼에도 불구하고 JSON-LD를 실현하는 것은 전체 팀에 있어서 하나의 학습 경험이다(어떤 새로운 인코딩 작업처럼!).우리의 공동 노력을 통해 우리는 짧은 몇 주 안에 우리의 많은 주요 페이지와 가장 중요한 데이터의 데이터 구조를 구축할 수 있다.현재 글 전시 페이지, 사용자 프로필 페이지, 조직 프로필 페이지와 영상 전시 페이지의 데이터는 JSON-LD와 모델로 구축되었다.어휘표를 짜다.
이 코드 세그먼트는 사용자 프로파일 페이지의 구조화된 데이터의 모양을 보여 줍니다.주의: 간결하게 보기 위해서, 나는 Stories::Controller에서 구조화된 데이터를 구성하는 대부분의 코드를 포함했다.Stories::Controller:
def set_user_json_ld
 @user_json_ld = {
"@context": "http://schema.org",
"@type": "Person",
"mainEntityOfPage": {
  "@type": "WebPage",
  "@id": URL.user(@user)
  },
"url": URL.user(@user),
"sameAs": [],
"image": ProfileImage.new(@user).get(width: 320),
"name": @user.name,
"email": “”,
"jobTitle": “”,
"description": @user.summary.presence || "404 bio not found",
"disambiguatingDescription": [],
"worksFor": [
  {
    "@type": "Organization"
  },
],
"alumniOf": “”
}
end
users/show 템플릿에서 다음을 수행합니다.
<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @user_json_ld.to_json.html_safe %>
  </script>
<% end %>
구조화된 데이터를 다시 사용하고 보기를 깨끗하게 유지하기 위해 구조화된 데이터의 모든 논리를 set_user_json_ld 중의 Stories::Controller 방법으로 추출하는 것을 선택해야 한다. 우리는 이러한 실현이 우리에게 가장 적합하다는 것을 발견했다.
JSON-LD로 바뀐 이래로 DEV의 검색엔진 최적화(SEO)가 크게 늘었다.요소와 조직의 잘못된 뜻을 없애고 구글과 파충류가 우리의 사이트와 관련 정보를 더욱 쉽게 조회할 수 있도록 함으로써 검색엔진의 최적화를 높일 수 있다.
JSON-LD를 어떻게 실현해서 SEO를 높일 계획입니까?
JAVA 범 형 방법 및 유형 제한
vvv에서 순환 영상을 제작할 때 자주 사용하는 노드의 조합

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage