note:cardを自分のはてなブログに設定する方法
note:cardとは
外部サイトの記事やページをnoteのテキストエディタに埋め込む際に大きく表示されるためには、note:cardを設定する必要がある
このnote:cardは特にウェブサイトを運営していない人でも、HTML文書のhead部分(<head>から</head>の間)に追加するメタタグやスクリプトを自由に記述できるブログサービスを使っている人なら設定できると思う。
はてなブログの場合、note:cardを設定するためには、アイキャッチ画像のURLを取得して、head要素にメタタグを記述する必要がある。
アイキャッチ画像のURLを取得する方法
1. ブログの管理画面であるダッシュボードにアクセスする。
https://blog.hatena.ne.jp
2. 左側の「設定」メニューを選んで、上の「詳細設定」を選ぶ。
3. 「詳細設定」の「アイキャッチ画像」の項目で設定した画像を右クリックして、画像を新しいタブか新しいウインドウで開く。
アイキャッチ画像を設定していない場合は横600px・縦314px以上の画像をアイキャッチ画像として新たに設定すると良い。
4. 画像を新しいタブか新しいウインドウで開いた時のURLをアドレスバーからコピーする。
これで、アイキャッチ画像のURLが取得できる。
note:cardのメタタグをhead部分に記述する
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-
いいなと思ったら応援しよう！
