高木のブログ

Gatsbyで作ったブログをOpenSearchに対応させる

2020/10/16

dev.toのソースコードを見たくてアドレスバーから検索しようとしたら
「dev.to github」と入力している途中で表示が変わって、dev.toの検索結果が表示された

DEV Searchを検索

dev.to 検索結果

こんなことできるのかと驚いた

OpenSearchというらしい
特に新しい技術ではなく、2005年からあるみたい

Gatsbyで作ったブログをOpenSearchに対応させる

需要はないのは百も承知だけど、自己満足のためにこのブログもOpenSearchに対応させてみた

手順

  1. opensearch.xmlを作成する
  2. headタグ内にlinkタグを記述する

たったこれだけ

1. opensearch.xmlを作成する

このブログに検索機能は実装していないので、ドメイン指定をしたGoogleの検索結果に飛ぶようにした
https://www.google.com/search?q=site:takagi.blog%20ruby

static/opensearch.xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>takagi.blog</ShortName>
  <Description>Search pages in takagi.blog</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">https://takagi.blog/favicon-32x32.png</Image>
  <Url type="text/html" method="get" template="https://www.google.com/search?q=site:takagi.blog%20{searchTerms}"/>
</OpenSearchDescription>

2. headタグ内にlinkタグを記述する

src/components/seo.js
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
+     link={[
+       {
+         rel: `search`,
+         type: `application/opensearchdescription+xml`,
+         title: `takagi.blog`,
+         href: `/opensearch.xml`
+       }
+     ]}
      meta={[
        {
          name: `description`,

結果

takagi.blogを検索

良きね

参考


Pixela