こんにちは。Miew-iCです。
今日は「Twitterのツイートの中にブログの記事を埋め込む方法」です。
URLを貼り付ければいいだけじゃないの？
その方法でも、可能です。
ですが、ブログのアイキャッチ画像を反映させることと、内容の一部を表示させることはできません。
今日のブログをアップしました。
— Miew-iC @ Webデザイナーを目指して勉強中。8/19 オンラインコーススタート (@Miew_iC) August 25, 2022
内容に関しては
「Twitterのアカウントを作りました！」
という内容です。
あまり特筆する内容ではないのですが…
ブログは続けることに意義がある！！
と、続けることにフォーカスします☺️✨https://t.co/HYZZzZijnl
Twitterカードって何？
下の例を見てみます。私のツイートです。
ブログを更新しました。
— Miew-iC @ Webデザイナーを目指して勉強中。8/19 オンラインコーススタート (@Miew_iC) August 26, 2022
以前、苦戦した「サイトについている、wwwのあり、なし」で同じHomeを表示させたかった。
という点に関してです。#WordPress #XREA#webデザイン勉強中 #webデザイン https://t.co/2xenwKpnQs
少し難しそうに見えますが、HTMLを使ってツイートにブログのアイキャッチ画像を表示させてみました！
上記のよう表示形式をTwitterカードといいます。
HTMLの記述方法はとても簡単です
まずWordPressの編集画面で「カスタムHTML」ブロックを追加
書くのは5行だけ。
私の2022年8月26日のブログのHTMLです。
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”Twitter:site” content=”@Miew_iC”>
<meta name=”twitter:title” content=”【XREA Free編２】wwwつき？wwwなし？同じサイトを表示させたい！”>
<meta name=”twitter:description” content=”以前、私がつまづいた点を書いています”>
<meta name=”twitter:image” content=”<meta name=”twitter:image” content=”https://www.miew-ic.com/wp-content/uploads/2022/08/character-399274_1920.jpg”>
上記の意味を紐解いていきたいと思います
本日（2022年8月27日）のブログの書き方を例にします。
１行目
私は「summary_large_image」という大きく画像を表示させる方法を選びました。
ブログを埋め込みたい方は、大きい方がいいのではないのかな？と思いました。
大きい画像でブログのトップページを表示させたい場合は、変更なくコピー&ペーストすれば大丈夫です。
<meta name=”twitter:card” content=”summary_large_image”>
2行目
Twitterの自分のアカウント名を書き込みます。私の場合は「＠Miew_iC」です。
ご自身の「アカウント名」をダブルクォーテーション「” ”」の中に書いてください。
<meta name=”Twitter:site” content=”@Miew_iC”>
3行目
ブログ記事のタイトルを書きます。
こちらもダブルクォーテーションの中のみ変更すれば大丈夫です。
下記は今日の記事のタイトルです。
<meta name=”twitter:title” content=”【Twitterカード】ツイートにブログの記事を埋め込みたい！【WordPress】”>
4行目
ブログ記事の表示させたい抜粋を書きます。ダブルクォーテーションの中のみ変更してください。
<meta name=”twitter:description” content=”Twitterでブログを埋め込む方法を書きました”>
5行目
ブログのアイキャッチ画像が表示されるようにします。
画像のURLをコピー&ペーストして「content=” “」のダブルクオーテーションの中に書きます。
<meta name=”twitter:image” content=”https://www.miew-ic.com/wp-content/uploads/2022/08/character-399274_1920.jpg”>
イメージ画像のURLの確認方法はこちら
矢印の「URLをクリップボードにコピー」でURLを確認できます。
私の今日のトップに書く「HTML」はこちら
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”Twitter:site” content=”@Miew_iC”>
<meta name=”twitter:title” content=”【Twitterカード】ツイートにブログの記事を埋め込みたい！【WordPress】”>
<meta name=”twitter:description” content=”Twitterでブログを埋め込む方法を書きました！”>
<meta name=”twitter:image” content=”https://www.miew-ic.com/wp-content/uploads/2022/08/human-1211467.png”>
最後にTwitterカードが作成されているか確認します
ブログページのURLをコピー＆ペーストし、カードが表示できるか確認できます。
https://cards-dev.twitter.com/validator
確認が取れたら、ツイートをするときにURLを貼り付けてください。
最初は難しいと思ったけど、意外と簡単だった！