WordPressでTwitterリンクカードを埋め込む方法!ブログにツイートを貼るやり方
ひつじ
このページでは、 WordPress(Gutenberg)でTwitterリンクカードを作る方法について解説します。
Twitterのリンクって、普通にTwitterのURLを貼ればいいんじゃないのか?
![おおかみくん](https://jinr.jp/manual/wp-content/uploads/2022/01/おおかみくん.jpg.webp)
Twitterリンクを普通に貼るだけの方法だと、リンクが切れて英数字だけの文字列になってしまうことがあるよ。
正しいやり方で、ブログにTwitterのツイートを埋め込もうね!
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
WordPressでTwitterのリンクカードを埋め込む方法
埋め込みたいツイート投稿で「・・・」をクリック
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.53.10.png)
Twitter(web版)にログインして、埋め込みたい投稿右上の「・・・」をクリックしましょう。
「埋め込み」のコードをコピー
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.54.46.png)
「Embed Tweet」の選択肢をクリックしましょう。
そうすると
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.55.50.png)
「Copy Code」の選択肢が出てきます。コピーしておきましょう。
「カスタムHTML」のブロックに貼り付ける
先ほどのコード、WordPressにそのまま貼り付けても、コードがそのまま表示されてしまいます。
うまく貼り付けるには「カスタムHTML」のブロックを取り出して、その中にコードを貼り付けましょう。
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.44.30.png)
すると「カスタムHTML」のブロックができるので、
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.46.33.png)
![](https://jinr.jp/manual/wp-content/uploads/2023/02/スクリーンショット-2023-02-10-15.57.41-1024x343.png)
こんな感じになったら完成!
ページを公開すると、Twitterの埋め込みがうまくできていることが確認できます。
ちなみに、Twitterの埋め込みは使いすぎるとページがすごーく重くなります。
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
あんまりたくさん埋め込まない方がいいってことか?
![おおかみくん](https://jinr.jp/manual/wp-content/uploads/2022/01/おおかみくん.jpg.webp)
そういうことだね!
1ページに埋め込む数は、数個(できれば1個)に留めておいた方が、ページの表示速度が落ちにくいのでおすすめ!
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
ABOUT ME