Cards(ツイッターカード)」をBloggerに設定してみた。Cards(ツイッターカード)」をBloggerに設定してみた。BlogスポンサーリンクTwitterには時々大きく画像の表示されたURLのリンクがあるツイートが流れてくる。「一見は百聞に如かず」とは少し意味が異なるが,視覚イメージはWEBサイトを見てもらう上では非常に重要なファクターである。Cards(ツイッターカード)」と呼ばれるTwitterによるデベロッパー向けのサービスである。どのブログを利用するかにもよるが,はてなブログのように既にこのTwitterカードに対応しているものもあれば,そうでないものもある。今回はこのブログ(Blogger)をTwitterカードに対応させてみたい。WEBサイトをTwitterカードに対応させる方法。Twitterのデベロッパーサイトを開く。英語で表示されて驚く人もいるかもしれないが,画面上で日本語に切り替えることができる。Twitterカードの説明が記載されているが,全部で7種類のカードデザインの概要と設定方法が表示されているので,まずは1番の「カードタイプ」の設定を行う。カードのデザインはWEBサイトの用途にもよるが,私は「大きな画像付きのSummaryカード」を選択してみた。上記の画面の後方にHTMLに挿入するサンプルコードがあるので,これをの直後に挿入し,サイトを更新する。validator)に貼り付けてプレビューを表示させる。成功すれば完了である。基本的な操作はこれだけなのでWEBサイトによっては非常に簡単に設定することができる。Bloggerの場合Googleの特殊なHTMLを使用しているため,設定がやや困難であった。BloggerにTwitterカードを設定するときには注意が必要。ここからはBloggerに限定して述べる。下記はこのブログのテンプレートから「HTMLの編集」に実際に挿入してみたmetaタグである。Twitter公式のmetaタグをBloggerに合わせて少し改変している。参照したWEBサイトはこの記事の最後にまとめて記す。property='og:image'/>このmetaタグのうち,titleとdescriptionについてはBloggerの個別記事のタイトルと「検索向け説明」が反映されるようになっている。検索向け説明を記入しないとTwitterカードがエラーになるため注意が必要である。大きく直しているのはimageのタグで個別記事の画像に対応できるようになっている。これはたき備忘録さんの内容が非常に参考になったので,是非一度見てもらいたい。おわりに:各ブログのmetaタグ修正はググって調査を!Bloggerに関する参照WEBサイトは残しておくが,今回はそれ以外の記事については調べることができていない。Cards」やブログの名前を入力すれば何かしら情報が得られると思うので,複数を参照した上で自己責任で自分のWEBサイトの魅力を発信してもらいたい。Cardsを設定する手順・方法。Cards(ツイッターカード)」をBloggerに設定してみた。シリーズは、あえて言うなら「万能なカード」こんにちは、uru(@uru_)です。XS購入1ヶ月レビ...2017-06-07【超進化】Kindle本ハイライトとメモのWEBサイトが改善!確認しやすくなって利便性向上!!こんにちは、uru(@uru_)です。Payに登録したサブのクレジットカードで決算する方法。Payにクレジットカードを登録する方法。ジェットブラック128GBが到着!今までで1番待ったかも。ジェットブラック128GB。はてなブログPro〔Learninghacker〕は、好奇心旺盛な著者が知的で創造的な刺激を求めて日々を過ごし、さまざまな体験や思考から自分なりの「学び」をハックし、紹介しています。AdSenseの関連コンテンツ機能が使えるようになったので使ってみた。Blogブログ開始3ヶ月未満で月間1万PVを達成!読者の方々に感謝です。Velopに買い換えたらネットワーク環境が死角なしに!無敵か!?ガジェット初心者がからだづくりを続けるコツは“メニューの自動化”。当サイトはGoogle及びGoogleのパートナー(第三者配信事業者)の提供する広告を設置しております。その広告配信にはCookieを使用し、当サイトへの過去のアクセス情報に基づいて広告を配信します。使用することにより、GoogleやGoogleのパートナーは当サイトや他のサイトへのアクセス情報に基づいて、適切な広告を当サイト上でサイト利用者に表示できます。ベースでの広告掲載に使用される第三者配信事業者のCookieを無効にできます。その他、Googleの広告におけるCookieの取り扱い詳細については、Googleのポリシーと規約ページをご覧ください。Learninghackerスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。