모든 웹사이트에서 검색 바로 가기(OpenSearch)를 구현하는 방법

오픈서치란?

OpenSearch는 웹사이트와 검색 엔진이 검색 결과를 표준적이고 접근 가능한 형식으로 게시하는 방법입니다. 그 조각 중 하나는 설명 파일이며 이것이 이 기사의 초점입니다.

설명 파일을 사용하면 브라우저나 다른 클라이언트 응용 프로그램이 해당 검색 엔진을 사용할 수 있도록 웹 사이트가 자체적으로 검색 엔진을 설명할 수 있습니다.

예시

Chrome을 열고 "egghead.io"를 입력하면 바로 검색할 수 있는 옵션이 있습니다. Tab 또는 Space 를 누르고 검색어를 입력하고 Enter 를 누르면 검색 결과 페이지로 바로 이동합니다.

If you never visited their site before, you may need to refresh the page after opening it for the first time

구현

웹사이트에서 동일한 기능을 구현하려면 XML 파일과 HTML 태그가 필요합니다. 설명 파일은 다음 구조의 XML 파일이어야 하며 https://yoursite.com/opensearch.xml 와 같은 공개 URL에서 사용할 수 있어야 합니다.

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>[SNK]</ShortName>
  <Description>[Search engine full name and summary]</Description>
  <InputEncoding>[UTF-8]</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</Image>
  <Url type="text/html" method="get" template="[searchURL]" />
  <moz:SearchForm>[https://example.com/search]</moz:SearchForm>
</OpenSearchDescription>

대부분의 태그는 브라우저가 사용자에게 표시할 내용을 설명합니다. 실제 검색에서 중요한 태그는 <Url /> 입니다. 여기에서 검색 페이지의 템플릿 URL을 입력합니다.

에그헤드의 경우 https://egghead.io/opensearch.xml 에서 사용할 수 있는 파일입니다.

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>egghead</ShortName>
  <Description>Search egghead</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">https://egghead.io/favicon.ico</Image>
  <Url type="text/html" method="get" template="https://egghead.io/q?q={searchTerms}&ref=opensearch"/>
  <moz:SearchForm>https://egghead.io/q</moz:SearchForm>
</OpenSearchDescription>

주소 표시줄에 입력한 내용은 템플릿{searchTerms}의 https://egghead.io/q?q={searchTerms}&ref=opensearch 변수를 대체합니다.

다음 단계는 HTML의 link 요소에 head 태그를 추가하는 XML 파일을 찾을 위치를 브라우저에 지시하는 것입니다. 이렇게 하면 브라우저에서 autodiscover the description file 을 수행할 수 있습니다.

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="ShortName">

테스트

변경 사항을 로컬에서 테스트하려면 로컬 호스트 환경(터널링이라고도 함)을 가리키는 보안 URL이 필요합니다. 알고 있는 도구를 자유롭게 사용하십시오. ngrok 또는 localtunnel 을 추천할 수 있습니다. this blog post 에서 다른 옵션을 찾을 수 있습니다.

크롬과 사파리

브라우저에서 보안 URL을 방문하십시오

페이지 새로 고침 - 브라우저가 링크 태그를 읽고 색인을 생성했습니다.

URL을 다시 입력하면 검색 바로 가기를 사용할 수 있습니다.

파이어폭스

Firefox에서는 사이트를 검색 엔진으로 수동으로 색인화해야 합니다. 이를 수행하는 다양한 방법은 their documentation에 설명되어 있습니다.

예시

Next.js 애플리케이션인 egghead에서 언급한 구현을 보고 싶다면 this pull request 을 참조하십시오.

마무리

이 게시물이 도움이 되었기를 바랍니다. 이전에 썼던 것과는 많이 다르지만 꼭 써야겠다는 생각이 들었습니다.

의견에 당신의 생각을 알려주십시오.

자세한 내용은 my newsletter 및 follow me을 구독하십시오.

참고문헌

MDN

GitHub

Wikipedia

egghead PR