it上の画像のように、デバイスにあわせて横幅を自動調整表示してくれる、このレスポンシブサイト、スマホでもタブレットでも、縦でも横でも自動で横幅にあわせて表示してくれるから便利ですよね。TwitterカードとかOGPって何ですか?URLつきツイートの時に、リンク先のタイトルや説明文、サムネイル画像などの詳細情報を、リッチにわかりやすく表示してくれるTwitterの機能の事をTwitterカードといいます。Pro)は同じような内容をFacebookに表示してくれる機能の事です。Facebookの投稿欄に、urlを貼り付けただけで、一瞬でそのリンク先の詳細が画像付きで表示される便利な機能の事。この機能を自社のウェブサイトに実装しておくと、SNSでの拡散がしやすくSNSマーケティングに効果的です。プロでも手間のかかるこの作業を簡単にしてくれるテーマがあります。「テーマ」というのはワードプレスのテンプレートの事ですが、レスポンシブサイトでしかも、SNSのSEOに強いと評判なのが「賢威」です。「賢威」はバージョン6.2からTwitterカードとかOGPの実装を採用しやすくなりました。機能が搭載されています。それ以外にもいろんなテーマに採用されているはずなのでチェックを入れておいてくださいね。何と下のように、ソースのheadに、OGPと、microdataと、Twitterカードのmetaが自動書き出しされてしまいました。このすごさは、OGPと、microdataと、Twitterカードの設定を、別々に手動でやった事がある人には、わかるはず。大変な手間がかかる作業で、このSEO対策を専門にしてる会社があるくらいです。Webデザイナーも、これができると、「SEOもできます」と言って差し支えありません。今後のために賢威でのTwitterカードとOGPを同時設定をメモしておきます。先にFacebookの設定を先に行います。OGPを設定しないと、Twitterカードの設定も活きないからです。この段階でのポイントは、Facebookでの自分のIDの、AppIDと、管理者IDを、Facebook設定画像の各欄に入れ、タグの出力を有効にして、変更を保存。FacebookのAppIDと、管理者IDを探すには、ここが参考になります。次に、その下のGoogle+の設定は、タグの出力を「無効にする」から「有効にする」に変え、サムネイル画像を設定して、変更を保存するだけですから簡単です。ここから問題のTwitterカードの設定です。Imageの方は、サムネイル画像が少し大きくなります。その画像をこのように決めたら、変更を保存します。whitelisted」ホワイトリストに登録されていないという警告が出ています。これを解除するために、Twitterカードに申請を行います。申請時のガイドラインはこちら。承認申請して、ホワイトリスト化してもらう手順が必要なのです。Approval」という青いボタンがありますから、そこをクリックします。すると次のステップはこのようになります。Infomationの下にある、Descriptionの欄です。Approval」を押し、申請を送信します。準備して1回だけ送信します。この時、記載されているEmailアドレスを確認しておきます。contentと記載のチェックはつけないようにします。これはコンテンツが一般的ではなく、暴力とかアダルトとか、の場合につけて、内容により許可をもらうよう申請するためのチェックです。申請後の画面はこのように、申請を受付、保留中の表示に変わります。ready!」という件名のメールが届きます。successfully」と表示確認。そのサイトのソースheadが、上から3番目の画像のように、自動出力されたのを確認できます。「OGP・Microdata・Twitterカードの個別設定」という欄が、作成されています。記入しておけば、設定しておいたサムネイル画像とともに、タイトルや説明が表示され、SNSからのアクセスを集めやすくなるわけです。最後に、Debugger、https://developers.facebook.com/tools/debug/で、サイトのOGPを確認。Analytics、https://analytics.twitter.comでも、Twitterカードのアクセス数を確認できます。UX/UIも秀悦なウェブ表示できますieやedgeで表示されない病を克服したグラフィックピックアップ記事2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。UX/UIも秀悦なウェブ表示でき...Jimdoでもここまでできる!コスパのいいコーポレートサ...コスメECサイトをCMSで制作した実例。齋藤天津子...2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。カバーをかっこよくつくるポイントこのポートフォリオの中のカバーは私自身が制作しています。