위젯: 추천

<devsite-recommendations> 맞춤 요소는 독자에게 콘텐츠를 추천하는 데 사용할 수 있습니다. 시스템이 추천을 생성하도록 하거나, 직접 명시적인 추천을 제공할 수도 있고, 문서의 기존 추천 섹션을 래핑하여 일관된 프레젠테이션, 클릭연결 통계, 풍부한 사용자 인터페이스 (설명 및 이미지 포함)를 제공할 수도 있습니다.

사용

이 위젯을 사용하려면 <devsite-recommendations> 요소를 만드세요. 명시적으로 권장사항을 제공하려면 요소 내에 링크를 추가하세요. 현재는 요소가 비어 있을 때 시스템에서 생성된 추천이 제공되지만, 향후 작업에서는 작성자가 명시적인 추천이 제공될 때 생성된 추천을 실험하고 알고리즘에 대한 입력으로 사용할 수 있습니다.

명시적인 권장사항을 제공하는 경우에는 요소 내에 마크업을 제공하세요. 요소가 연결될 때 감지된 <a> 태그는 href 속성이 추출되어 추천에 사용됩니다.

세 개 이상의 추천을 제공하는 경우 무작위로 선택됩니다. 하지만 추천의 순서는 입력 순서와 동일하게 유지되므로 우선순위가 높은 추천이 항상 가장 왼쪽에 표시됩니다.

생성된 결과에 특정 추천이 표시되지 않도록 하려면 빈 <devsite-recommendations> 요소를 <link rel="disallow" href="/path"> 컬렉션으로 만들면 됩니다. rel=disallow 및 href 속성이 있는 <link> 태그는 자동으로 감지되어 생성된 추천에서 삭제됩니다.

페이지의 특정 하위 집합에서만 추천을 원하는 경우 query 필드에 Nomenclature 태그를 사용하여 결과를 필터링할 수 있습니다. 문법은 k:category:value입니다. 예: k:language:typescript 태그 목록은 태그가 포함된 페이지를 포함하는 쉼표로 구분된 목록 (k:language:typescript,k:language:swift)일 수 있습니다.

다음 섹션에서는 마크업, 정상적인 조건에서 마크업이 렌더링되는 방식, 그리고 머신 또는 간단한 사용자 에이전트에 어떻게 렌더링되는지에 대해 설명합니다.

마크업

<devsite-recommendations>
<p>Note: link text is displayed when JavaScript is off</p>
<ul>
  <li><a href="/maps/documentation">Maps docs</a></li>
  <li><a href="/analytics">Analytics</a></li>
  <li><a href="/machine-learning/crash-course">MLCC</a></li>
</ul>
</devsite-recommendations>

결과

간단한 user-agent

참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.

disallows가 포함된 예

마크업

<devsite-recommendations>
  <link rel="disallow" href="/maps/documentation">
  <link rel="disallow" href="/analytics">
  <link rel="disallow" href="/machine-learning/crash-course">
</devsite-recommendations>

결과

결과는 변경될 수 있는 추천에 따라 달라지므로 출력은 추천 모델의 출력과 동일하게 표시됩니다.

기존 콘텐츠 래핑

이 요소는 페이지의 기존 마크업을 점진적으로 개선할 수 있으므로 기존 링크를 <devsite-recommendations>로 래핑하여 업그레이드할 수 있습니다.

새로운 링크는 데이터 수집 및 실험 대시보드와 같은 추천 플랫폼의 모든 기능과 정책을 채택하지만 콘텐츠도 설명과 이미지를 포함한 리치 메타데이터로 대체되며 일부 링크 (예: 액세스가 제어되거나 메타데이터가 없는 페이지)가 제외될 수 있습니다.

마크업

<devsite-recommendations>
<h2>Example communities</h2>
<p>Note: All markup here will be replaced with the recommendation UI.</p>
<p>
  For more information on Google Developers, check out our <a href="/community/experts">GDEs</a>. If
  you are looking to form a community, take a look at <a href="/community/gdg">GDGs</a>. Lastly, if
  you're currently studying, don't miss our <a href="/community/dsc">DSCs</a>.
</p>
</devsite-recommendations>

결과

커뮤니티 예

참고: 여기에 있는 모든 마크업이 추천 UI로 대체됩니다.

Google Developers에 관한 자세한 내용은 GDE를 참고하세요. 만약 커뮤니티를 형성하고 싶다면 KML을 살펴보세요. 마지막으로 Google의 DSC를 놓치지 마세요

마크다운 파일에서의 사용

마크다운 (.md) 파일에서 커스텀 요소가 <section> 또는 <div>와 같은 표준 HTML 요소로 래핑되었는지 확인합니다.

혼합 콘텐츠

## Markdown section

* Markdown list
* [Markdown link](/foo)

## HTML section

<div>
<devsite-recommendations>
  <p>Note: link text is displayed when JavaScript is off</p>
  <h2>Sample heading</h2>
  <a href="/recommended">Recommended</a>
</devsite-recommendations>
</div>

마크다운 섹션

HTML 섹션

참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.

샘플 제목

권장

순수 마크다운

<pre><devsite-recommendations>
## Sample heading

* Note: link text is displayed when JavaScript is off
* [Maps documentation](/maps/documentation)

</devsite-recommendations><pre>

결과

샘플 제목

  • 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
  • 지도 문서

시스템 속성

현재 지원되는 유일한 속성은 시스템 동작을 제어하기 위한 것이며 일반 사용자에게는 필요하지 않습니다.

yield (선택사항) 이 속성을 지정하면 페이지에서 수익이 창출되지 않는 다른 추천 요소에 이 요소가 적용됩니다. 일반적으로 사이트 자체에서 페이지에 자동으로 추천 항목을 배치하지만 다른 인스턴스가 없는 경우에만 표시하는 데 사용됩니다.

명명법을 사용한 필터링

마크업

<devsite-recommendations query="k:language:typescript">
</devsite-recommendations>

결과