Gatsbyで作ったブログをOpenSearchに対応させる
2020/10/16
dev.toのソースコードを見たくてアドレスバーから検索しようとしたら
「dev.to github」と入力している途中で表示が変わって、dev.toの検索結果が表示された
こんなことできるのかと驚いた
OpenSearchというらしい
特に新しい技術ではなく、2005年からあるみたい
Gatsbyで作ったブログをOpenSearchに対応させる
需要はないのは百も承知だけど、自己満足のためにこのブログもOpenSearchに対応させてみた
手順
- opensearch.xmlを作成する
- 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`,結果
良きね
