검색 구성 요소 추가

검색 구성 요소를 사용하면 사용자가 웹 사이트에서 쿼리를 입력하고 정보를 찾을 수 있습니다. 사용자가 관련 정보를 빠르게 찾아야 하는 콘텐츠가 많은 사이트에 특히 유용합니다.

중요

  • AI 기반 검색 구성 요소는 생성형 AI 검색이 활성화된 웹 사이트에서만 사용할 수 있습니다.

검색 구성 요소를 추가하는 방법

검색 구성 요소를 페이지에 삽입하려면:

  1. 디자인 스튜디오를 열어 페이지의 콘텐츠와 구성 요소를 편집합니다.
  2. 편집할 페이지를 선택합니다.
  3. 검색을 추가할 섹션을 선택합니다.
  4. 편집 가능한 캔버스 영역 위로 마우스를 가져가 구성 요소 패널에서 검색을 선택합니다.

디자인 스튜디오의 페이지에 검색 구성 요소를 추가하는 스크린샷.

검색 창에서는 사용자가 검색어를 입력할 수 있습니다.

속성 설명
검색 결과 인라인 표시 결과 요약을 동일한 페이지에 표시할지 아니면 전용 검색 결과 페이지로 리디렉션할지를 결정합니다.
자리 표시자 텍스트 사용자가 프롬프트를 입력하기 전에 검색 창 안에 표시되는 텍스트(예: "무엇을 검색하시겠습니까?").

검색 요약

검색 요약 섹션에는 웹 사이트에서 검색된 관련 콘텐츠에 대한 AI 생성 요약이 표시됩니다.

속성 설명
제목 텍스트 AI가 생성한 검색 요약 위에 표시되는 헤더입니다.

검색 결과 페이지 추가

기본 검색 결과 페이지는 사이트가 만들어질 때 자동으로 프로비전되지만 이 페이지는 페이지 작업 영역에 표시되지 않습니다. 따라서 직접 사용자 지정할 수 없습니다. 사용자 지정 검색 결과 페이지를 만들어야 하는 경우 다음 단계를 따르세요.

  1. 디자인 스튜디오를 엽니다.
  2. + 페이지를 선택하여 페이지 생성 대화 상자를 엽니다.
  3. 페이지 하단에서 사용할 수 있는 다른 방법으로 페이지 추가를 선택합니다.
  4. 페이지 이름을 입력합니다.
  5. 검색 표준 페이지 레이아웃을 선택합니다.
  6. 추가를 선택합니다.

참고

웹사이트에는 한 번에 하나의 검색결과 페이지만 있을 수 있습니다. 새 검색 레이아웃 페이지를 추가하면 기존 페이지가 대체됩니다.

이전 검색 결과 페이지를 복원하거나 재할당하려면:

  1. 관리 앱을 엽니다.
  2. 사이트 표식으로 이동합니다.
  3. 선택한 웹 사이트에 대한 검색 사이트 표식을 엽니다.
  4. 검색 결과 페이지로 사용할 페이지를 업데이트합니다.

검색 결과

이 섹션은 지정된 검색 결과 페이지에서 검색 구성 요소를 사용하는 경우에만 사용할 수 있습니다.

속성 설명
제목 텍스트 일치하는 검색 결과의 전체 목록 위에 표시되는 제목입니다.

알려진 문제점

검색 표준 페이지 레이아웃을 사용하여 새 검색 결과 페이지를 만들면 페이지가 완전히 로드될 때까지 이전 검색 컨트롤이 잠깐 나타납니다. 이 문제를 해결하려면 헤더 웹 템플릿에서 다음 코드 조각을 제거합니다.

<section class="page_section {{ section_class | h }} color-inverse">
    <div class="row sectionBlockLayout sectionFixedStyle" style="display: flex; flex-wrap: wrap; text-align: center;">
        <div class="container" style="display: flex; flex-wrap: wrap;">
            <div class="col-lg-12 columnBlockLayout" style="display: flex; flex-direction: column; justify-content: center;">
                {% if current_page == sr_page %}
                <h1 id="mainContent">{% editable snippets 'Search/Title' default: resx["Discover_Contoso"] %}</h1>
                {% include 'Search' search_id:'search_control' %}
                {% endif %}
            </div>
        </div>
    </div>
</section>