使用 Google 搜索入口点

使用 Google 搜索入口点

如需使用 Google 搜索入口点，您需要根据有依据的回答的元数据中包含的搜索查询显示入口点。回答包括：

  • “内容”：LLM 生成的回答。
  • “searchQuery”：用于 Google 搜索入口点的查询。

例如，在以下代码段中，Gemini 会回答 Google 搜索连接提示，该提示询问一种热带植物。

"predictions": [
  {
    "content": "Monstera is a type of vine that thrives in bright indirect light…",
    "groundingMetadata": {
      "webSearchQueries": ["What's a monstera?"],
    }
  }
]

您可以获取此输出并使用 Google 搜索入口点显示它。

Google 搜索入口点的要求

正确做法：

  • 按照下面的显示要求，严格按照提供的入口点显示，不得做出任何修改。
  • 在用户与入口点进行交互时，直接将用户转到 Google 搜索结果页 (SRP)。

错误做法：

  • 在用户点按和显示 SRP 之间添加任何插页屏幕或其他步骤
  • 在入口点或关联的基础 LLM 回答旁边显示任何其他搜索结果或建议。

显示屏要求

  • 准确显示所提供的入口点，且不要对颜色、字体或外观进行任何修改。确保入口点按照以下模拟中指定的方式渲染，包括针对浅色和深色模式：
  • 每当显示连接目标时，其相应的 Google 搜索入口点都应保持可见。
  • 品牌塑造：您必须严格遵循第三方使用 Google 品牌特征时适用的 Google 指南
  • Google 搜索入口点应至少为连接回答的完整宽度。

点按时的行为

当用户点按该条状标签后，系统会直接转到该条状标签中显示的搜索字词的 Google 搜索结果页 (SRP)。SRP 可以在应用内浏览器或单独的浏览器应用中打开。请务必不要以任何方式最小化、移除或遮挡 SRP 的显示。以下动画模型展示了点按与 SRP 互动。

用于实现 Google 搜索入口点的代码

以下模板示例和样式呈现了用于连接的搜索字词的 Google 搜索入口点，该入口点符合所列要求。

为帮助隔离 CSS 样式，我们建议您将其嵌入到 Shadow DOM 中的适当位置。

用于创建 shadow DOM 的代码使用以下格式： cs const shadow = element.attachShadow({mode: 'open'}); shadow.innerHTML = 'content'; 在此示例中，元素是要放置 shadow DOM 的位置，内容则是以下代码示例。

进行以下变量替换：

  • URL_ENCODED_SEARCH_QUERY：groundingMetadata.searchQuery 的网址编码版本。
  • SEARCH_TERM：groundingMetadata.searchQuery 的第一个元素。
<style>
.container {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-family: Google Sans, Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
}
.chip {
  display: inline-block;
  border: solid 1px;
  border-radius: 16px;
  min-width: 14px;
  padding: 5px 16px;
  text-align: center;
  user-select: none;
  margin: 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.carousel {
  overflow: auto;
  scrollbar-width: none;
  white-space: nowrap;
  margin-right: -12px;
}
.headline {
  display: flex;
  margin-right: 4px;
}
.gradient-container {
  position: relative;
}
.gradient {
    position: absolute;
    transform: translate(3px, -9px);
    height: 36px;
    width: 9px;
}
@media (prefers-color-scheme: light) {
  .container {
    background-color: #fafafa;
    box-shadow: 0 0 0 1px #0000000f;
  }
  .headline-label {
    color: #1f1f1f;
  }
  .chip {
    background-color: #ffffff;
    border-color: #d2d2d2;
    color: #5e5e5e;
    text-decoration: none;
  }
  .chip:hover {
    background-color: #f2f2f2;
  }
  .chip:focus {
    background-color: #f2f2f2;
  }
  .chip:active {
    background-color: #d8d8d8;
    border-color: #b6b6b6;
  }
  .logo-dark {
    display: none;
  }
  .gradient {
      background: linear-gradient(90deg, #fafafa 15%, #fafafa00 100%);
  }
}
@media (prefers-color-scheme: dark) {
  .container {
    background-color: #1f1f1f;
    box-shadow: 0 0 0 1px #ffffff26;
  }
  .headline-label {
    color: #fff;
  }
  .chip {
    background-color: #2c2c2c;
    border-color: #3c4043;
    color: #fff;
    text-decoration: none;
  }
  .chip:hover {
    background-color: #353536;
  }
  .chip:focus {
    background-color: #353536;
  }
  .chip:active {
    background-color: #464849;
    border-color: #53575b;
  }
  .logo-light {
    display: none;
  }
  .gradient {
    background: linear-gradient(90deg, #1f1f1f 15%, #1f1f1f00 100%);
  }
}
</style>
<div class="container">
  <div class="headline">
    <svg class="logo-light" width="18" height="18" viewBox="9 9 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M42.8622 27.0064C42.8622 25.7839 42.7525 24.6084 42.5487 23.4799H26.3109V30.1568H35.5897C35.1821 32.3041 33.9596 34.1222 32.1258 35.3448V39.6864H37.7213C40.9814 36.677 42.8622 32.2571 42.8622 27.0064V27.0064Z" fill="#4285F4"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 43.8555C30.9659 43.8555 34.8687 42.3195 37.7213 39.6863L32.1258 35.3447C30.5898 36.3792 28.6306 37.0061 26.3109 37.0061C21.8282 37.0061 18.0195 33.9811 16.6559 29.906H10.9194V34.3573C13.7563 39.9841 19.5712 43.8555 26.3109 43.8555V43.8555Z" fill="#34A853"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6559 29.8904C16.3111 28.8559 16.1074 27.7588 16.1074 26.6146C16.1074 25.4704 16.3111 24.3733 16.6559 23.3388V18.8875H10.9194C9.74388 21.2072 9.06992 23.8247 9.06992 26.6146C9.06992 29.4045 9.74388 32.022 10.9194 34.3417L15.3864 30.8621L16.6559 29.8904V29.8904Z" fill="#FBBC05"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 16.2386C28.85 16.2386 31.107 17.1164 32.9095 18.8091L37.8466 13.8719C34.853 11.082 30.9659 9.3736 26.3109 9.3736C19.5712 9.3736 13.7563 13.245 10.9194 18.8875L16.6559 23.3388C18.0195 19.2636 21.8282 16.2386 26.3109 16.2386V16.2386Z" fill="#EA4335"/>
    </svg>
    <svg class="logo-dark" width="18" height="18" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
      <circle cx="24" cy="23" fill="#FFF" r="22"/>
      <path d="M33.76 34.26c2.75-2.56 4.49-6.37 4.49-11.26 0-.89-.08-1.84-.29-3H24.01v5.99h8.03c-.4 2.02-1.5 3.56-3.07 4.56v.75l3.91 2.97h.88z" fill="#4285F4"/>
      <path d="M15.58 25.77A8.845 8.845 0 0 0 24 31.86c1.92 0 3.62-.46 4.97-1.31l4.79 3.71C31.14 36.7 27.65 38 24 38c-5.93 0-11.01-3.4-13.45-8.36l.17-1.01 4.06-2.85h.8z" fill="#34A853"/>
      <path d="M15.59 20.21a8.864 8.864 0 0 0 0 5.58l-5.03 3.86c-.98-2-1.53-4.25-1.53-6.64 0-2.39.55-4.64 1.53-6.64l1-.22 3.81 2.98.22 1.08z" fill="#FBBC05"/>
      <path d="M24 14.14c2.11 0 4.02.75 5.52 1.98l4.36-4.36C31.22 9.43 27.81 8 24 8c-5.93 0-11.01 3.4-13.45 8.36l5.03 3.85A8.86 8.86 0 0 1 24 14.14z" fill="#EA4335"/>
    </svg>
    <div class="gradient-container"><div class="gradient"></div></div>
  </div>

  <div class="carousel">
    <a class="chip" href="https://www.google.com/search?q=<var>URL_ENCODED_SEARCH_QUERY</var>&client=app-vertex-grounding&safesearch=active">
      <var>SEARCH_TERM</var>
    </a>
  </div>
</div>
</pre>

后续步骤