超初心者 WordPress奮闘記 Twitterでリンクに画像を表示する!

 最近は感染防止のために退出を控えている日々が続いておりますので、思うようにコンデジ撮影に出掛けられない状況が続いております。

 かなりのストレスが溜まってきておりますが、みなさんも同じ、もう少し頑張ろう、と我慢を続け居ております。

 さて、在宅の日々ですが、撮影に行けませんので、家で出来る作業を少しずつ進めていきたいと思います。

 ので、今回はコンデジとは全く関係のない話題となります。

《 目次 》

  • WordPressの投稿お知らせをTwitterでカッコ良く行いたい
  • プラグイン All in One SEO Pack の導入
  • 表示の確認
  • 参考情報

 

WordPressの投稿お知らせをTwitterでカッコ良く行いたい

 今やホームページの制作において約3割のホームページがWorPressで制作されているとも言われる状況の中、WordPressを導入して数か月、ほとんど何も改善できていない状況ですので、少しずつ改善を加えてゆきたいと思います。

 元々はホームページビルダーで制作していましたが、WordPressは難しそう、という気持ちがありホームページビルダーを使っておりました。実際、初心者でも扱いやすい造りになっており、それ程苦労もせずにホームページを制作できていました。

 しかしながら、ホームページのページ数が増えていきますと、動きが重くなってきたように感じる場面が出てきましたので、恐る恐るWordPressの導入を決意いたしました。

 やはり良くわからない、導入してからも正直悪戦苦闘しております。しかしながら、コストの面などメリットも多いと考えられますので、もう暫くは格闘してみたいと考えています。

 以前より、ホームページのブログを更新しましたら、TwitterなどのSNSで告知を行っていたのですが、リンクを貼った時に、そのままhttps://www…..と表示されますので、格好が悪いと言うよりも、怪しいリンクだと誤解を受けそう、という事で気になっておりました。

 今回、少し時間ができましたので、Twitterに貼るリンクの表示を画像付きの格好良いもので行うトライをしてみました。

 今回のブログは、そのリンクの貼り方の作業内容の説明となってしまいますので、その分野に興味のない方はスルーしていただいて問題ございません。

 WordPressの超初心者ですから、言語を直接弄りたくない、あるいは英語のツールもなるべく使いたくない、など恐る恐るの対応です。

 まずは、ネットでTwitterにアイキャッチ画像を表示する方法を検索しました。

 どうやらTwitterの開発環境でURLを登録するとアイキャッチ画像が表示されるらしい、という事が分りましたので、早速開発環境にアクセスします。

 「card validator」とググれば直ぐにTwitterの開発環境にアクセスできます。

 英語では分かりづらいので、グーグルの右上の方の「このページを翻訳」のアイコンをクリックし、日本語を選択します。

 表示されている内容が日本語で表示されます。

 早速リンクを貼りたいページのアドレスをカードバリデーターに入力し、プレビューボタンを押してみます。

 なぜか上手く表示できないようです。

 WordPressの超初心者としては、この時点で少し焦ってしまいます。下手に弄って、変なことになってしまっても大変ですので、再度ネットで良く調べ直しました。

 どうやら、Twitterのリンク表示に画像を表示させるには、それ用のプラグインが必要な様です。

 

プラグイン All in One SEO Pack の導入

 WordPressのコントロール画面で、プラグインの検索を行い、All in One SEO Packのインストールを行います。

 インストールが完了しましたら、有効化のところをクリックし、プラグインを有効化します。

 インストールしたプラグインが有効化されますと、コントロールパネルの左側メニューに All in One SEO の表示が出てきます。

 恐らくSEO対策もできるプラグインだとは思いますが、今回は目的に合わせ、必要最小限の設定のみ行いたいと思います。

 最初に表示される画面の設定は、今回はスルーして、左側メニューの機能管理の項目を選択します。

 右側のソーシャルメディアの項目のActivateという部分をクリックします。

 Activateの部分がDeactivateに変わっている事が分ると思います。また上の方に、All in One SEO Pack 設定を更新しました、の表示がされています。

 左側のメニューにもソーシャルメディアの項目が表示されるようになりますので、ソーシャルメディアの項目を選択します。

 ソーシャルメディアのページの中で、画像設定の OG:Imageソースを選択で、デフォルト画像が初期設定となっております。

 画像設定の OG:Imageソースを選択の項目を、アイキャッチ画像を選択します。

 次に同じページの下の方に、Twitter設定という項目がありますので、Twitterサイトの項目に@を付けたアカウント名、Twitterドメインの項目に@を付けないでアカウントを入力します。

 デフォルトTwitterカードの項目は、取り敢えず要約の大きい画像を選択します。

 以上を入力し、一番下の設定を更新の項目をクリックします。

 以上がプラグイン側の設定項目となります。

 

表示の確認

 それでは、早速どの様に表示されるか確認してみたいと思います。

 カードバリデーターに戻り、リンクを貼りたいページのURLを入力し、プレビューボタンを押します。

 右側にプレビュー画面が表示されました。成功です。

 念のため、Twitterにリンクを貼りたいページのアドレスを入力し、投稿してみます。

 ツイートするの項目をクリックし、送信が完了しますと、上手く画像付きのリンクが表示されました。

 上手く表示された事が確認できましたが、先ほどのプラグインのTwitter設定の中のデフォルトTwitterカードの項目を、今度は要約を選択してみます。

 再度、カードバリデーターにURLを入力しプレビューボタンを押します。

 後で分かった事ですが、このカードバリデーターのプレビューボタンをもう一度押さないと、プラグインの画像の「要約の大きい画像」から「要約」への設定変更が上手く反映されない模様です。

 カードバリデーターのプレビューボタンを押してから、再びTwitter内で表示テスト投稿を行ってみます。

 リンクを貼りたいページのアドレスを入力し、再度投稿。

 何とか上手く表示できた様です。この表示を求めて悪戦苦闘してしまいました。

 プラグインのTwitter設定の「要約」を選択した場合は、下記のように小さな画像で控えめにリンクの表示がされる様です。

 逆に、「要約の大きい画像」を選択した場合には、上記のように大きな画像で強調した表示ができる様でもあります。

 

参考情報

 今回は、コンデジの撮影ではありませんので、写真を楽しみにしていただいていた方には申し訳ない内容となってしまいました。

 ただ、現在は少々外を出歩いて撮影に集中できる状況でもありませんので、在宅で何かできることはないかと考え、WordPressネタとなってしまいました。

 これからWordPressを始める方への投稿という気持ちではなく、自分への備忘の意味を込めまして、書き綴らせていただきました。

 何分WordPress超初心者ですので、記載の内容が本当に正しいのかどうかも良く分かりませんが、トライアンドエラーの精神で、何とか辿り着いた足跡を記させていただきました。

 WordPressの運用は、結局のところ自己責任となってしまいますので、今回の投稿は軽く参考程度に留めていただければ幸いに存じます。

 また自分も少しずつ勉強し、見やすいサイト作りに励んでゆきたいと考えておりますので、改善項目につきましては今後も随時投稿させていただきたいと考えておりますので、宜しくお願い致します。