note:cardを自分のはてなブログに設定する方法

2019年8月12日 09:06

note:cardとは

外部サイトの記事やページをnoteのテキストエディタに埋め込む際に大きく表示されるためには、note:cardを設定する必要がある

このnote:cardは特にウェブサイトを運営していない人でも、HTML文書のhead部分(<head>から</head>の間)に追加するメタタグやスクリプトを自由に記述できるブログサービスを使っている人なら設定できると思う。

はてなブログの場合、note:cardを設定するためには、アイキャッチ画像のURLを取得して、head要素にメタタグを記述する必要がある。

1. ブログの管理画面であるダッシュボードにアクセスする。
https://blog.hatena.ne.jp

2. 左側の「設定」メニューを選んで、上の「詳細設定」を選ぶ。

3. 「詳細設定」の「アイキャッチ画像」の項目で設定した画像を右クリックして、画像を新しいタブか新しいウインドウで開く。
アイキャッチ画像を設定していない場合は横600px・縦314px以上の画像をアイキャッチ画像として新たに設定すると良い。

4. 画像を新しいタブか新しいウインドウで開いた時のURLをアドレスバーからコピーする。

これで、アイキャッチ画像のURLが取得できる。

1. 先に説明した「詳細設定」の「アイキャッチ画像」の項目からページの下に移動すると、「headに要素を追加」という項目がある。

ここで、以下のようにnote:cardのメタタグを入力する。

<meta property="og:image" content="/*コピーしたアイキャッチ画像のURL*/">
<meta name="note:card" content="summary_large_image">

画像を指定するタグにはog:imageとtwitter:imageの2通りあるが、og:imageを選んだ。

決められたアイキャッチ画像のURLを設定すると個別の記事に設定したアイキャッチ画像が反映されないのではと思うかもしれないが、その心配はない。はてなブログの場合は、冒頭に紹介したブログ記事も含めて、以下のように個別にアイキャッチ画像を設定してもnoteで大きく表示されるようになっている。

note:cardは、アイキャッチ画像のサイズが横600px・縦314px以上でないと反映されないので、サイズが下回ると以下のように表示されるので注意。

また、ヘルプページにはnote:cardを設定するサイトがhttpsでの配信をしている必要があるとしているので、httpsでの配信に切り替える必要がある。

さらに、noteクローラー(User Agent: notebot)がサイトにアクセスできる状態になっている、つまりnote:cardを設定するはてなブログの公開範囲が「すべての人に公開する」に設定したり、robots.txtなどでnoteクローラーをブロックしないような設定にする必要がある。

-end-

読んだ後は投げ銭のほどよろしくお願いします。日々の活力になります。Amazon欲しい物リストもよろしく：https://www.amazon.co.jp/hz/wishlist/ls/9FWMM626RKNI