このブログの内容
bloggerで作ったブログをシェアしたら
SUNideaというオンラインサロンで、Googleのbloggerというブログサービスについて講座を行いました。
SUNideaの公式Webサイトはコチラです。
今見ていただいているこのブログもbloggerで作成しています。
無料で広告も出ないため、非常に素晴らしいサービスなのですが、
HTMLやCSSを少し学ばないと難しいので、日本ではまだまだ広まっていません。
でも、もっと皆さんに知って欲しい！
なんといっても無料なのですよ！
そして、私のブログを見てもらってもわかると思いますが、自由なデザインを楽しめます。
Wordpressから移行したい方もたくさんいまして、講座をするに至ったのです。
そこで、出来たブログをDiscordというSUNideaで使用しているアプリにシェアしてもらったのですが、
画像が表示されなくてWordpressブログに埋もれてしまいました。
これはもったいない！
ので、画像を表示できるように設定しましょう！
トップページシェア時に画像を出したい
画像がないとこんな風に残念ですね。
こんな風に画像を出しましょう！
画像を作る
まずは画像を用意しましょう。
画像は1200×630で作ります。
私はCanvaで作りました！↓
Canvaは
コチラです。
SNSによっては真ん中部分しか表示されないので、次の画像のようにして、真ん中部分に文字をなど入れるようにしましょう。
画像を未公開ページに貼る
画像をページを使ってbloggerにアップします。
あとで使うのでページは公開せずに、いったん閉じます。
後ほど使う際は、画像リンクだけをコピーします。
画像リンクはグレーの部分です。
長いです！
HTMLで編集を開く
では、編集していきましょう。
テーマから、HTMLで編集を開きます。
テーマZELOには、このような記述があります。
投稿ページのシェア時には、ここにある記述で既に画像が出ます。
ここにトップページ用の画像も設定しておきます。
画像を設定する
1つ目のコードは画像の45と46行目の間に入れます。
<!-- トップページシェア用の画像 -->
<b:else/>
<meta content='画像のアドレス' property='og:image'/>
facebookではここに設定した画像が使われます。
コードはこのようになります。
次に、2つ目のコードを63と64行目の間に入れます。
<!-- トップページシェア用の画像 -->
<b:else/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='画像のアドレス' name='twitter:image'/>
こちらの画像はTwitterやdiscordの時に使われます。
コードはこのようになります。
「画像のアドレス」と書いたところに、ページで用意しておいた画像リンクをいれてください。
これで画像については完成！！！
ですが、このままだとTwitterではうまく出ません。
少々直します。
Twitterでうまく出せるようにタイトルを修正する
70行目をコメントアウトします。
コメントアウトは以下の記号で囲むことです。
<!--この中はブラウザに無視されます-->
このようになります。
次に、55と56行目の間に以下のコードを入れます。
<b:if cond='data:blog.pageName != ""'>
このようになります。
次に、57と58行目の間に以下のコードを入れます。
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
このようになります。
これでTwitterもエラーになりません。
ここまでやったらついでにもう少し設定しましょう。
任意ですが、Twitterのアカウントを設定しておきます。
大きいTwitterカードが表示されたときに、フォローを促せるような表示ができるようです。
Facebookも同じだと思いますが、私はFacebookをやっていないため、使っていません。←
確認しよう
Twitterなどにシェアをする前に、設定できているか確認しましょう！
Facebook シェアデバッカー
Facebookにログインして確認します。
私は使用していないので←
引用：Facebook シェアデバッカー
URL：https://developers.facebook.com/tools/debug/?locale=ja_JP
Twitter Card Validator
Twitterにログインして確認します。
以前はプレビューが見れたそうですが、今は見れません。
重要なのは、エラーチェックができること。
エラーが出ると赤いログが出ますので、修正が必要です。
また、キャッシュを書き換えてくれるようなので、以前Twitterに投稿したことがある場合は、こちらでキャッシュをクリアします。
キャッシュがそのままだと画像が置き換わりません。
引用：Twitter Card Validator
URL：https://cards-dev.twitter.com/validator
ラッコツールズ OGP確認
TwitterやほかのSNSでどう見えるか表示確認ができます。
とても便利です。
引用：ラッコツールズ OGP確認
URL：https://rakko.tools/tools/9/
シェアしよう！
確認できたら、シェアしましょう！！
discordでシェアした場合、以前の状態と変わらない場合はdiscordサーバーにキャッシュが残ってる可能性があります。
シェアするURLの後ろに?を付けるとキャッシュが強制更新できますので、試してみてください。
おまけ
- bloggerの設定にある説明にサイトの説明を入れておくと、パソコンなどの端末では、カードに説明も表示できます
（スマホは省略されることも）
Lineだとこのように説明が出ましたよ！
分かりやすい説明を書いておきたいですね。
- 投稿記事にもパーマリンク設定の辺りで説明が書けるので、試してみてね！
おわりに
すごく盛りだくさんな内容になってしまいましたが、いかがでしたでしょうか。
ちょっと設定がたくさんで大変ですが、
せっかく作ったらみんなに見てほしいですよね！
ぜひチャレンジしてみてくださいね。
無料で自由なbloggerを楽しみましょう！
0 件のコメント :
コメントを投稿