TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Metahead内のmetaに記述するTwitterカードやFacebookのOGPのコード、Googleなどの検索エンジン用のコードを確認・生成できるオンラインサービスを紹介します。
もうmeta要素を迷わない！最低限入れるべきmeta要素のまとめ - Qiita
こんにちは、@pompom0c0 です。 headに記述する内容、いつも前回のをそのまま使用するのですが、 なんで記述するのか一つ一つ理解していなかったので、まとめました。 <head> // 対策編 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> // SEO編 <title>サイトのタイトル</title> <meta name="keywords" content=""> <meta name="description" conten
【LINE対応】WordPressで簡単にOGP設定をする方法
【2016年2月公開】SEO三種の神器 「meta」「見出しタグ h1」「alt設定」って効果あるの？2016/02/17 OGP設定をご存知でしょうか？ OGP設定とはOGPとは「Open Graph protocol」の略称です。 FacebookやTwitter、Google＋など皆様もよく使うSNSやメッセージアプリで、ウェブサイトやブログ記事がシェアされた際にどのように表示させるかを制御するための設定です。 2015年12月より、LINEでもURLメッセージを投稿した際にサムネイルが表示されるようになりました。 シェアされた時に出てくる内容によって当然クリック率も変わってきます。少しでも魅力的に、内容に沿った画像や要約文を表示させることで劇的に効果を変えることができます。 SNSの重要性や普及が高まるにつれて、このOGP設定の重要性も比例して上がってきています。 OGP設定のルー
FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」 - OPTPiX Labs Blog
こんにちは、ウェブ担当の嶋です。2015年もどうぞよろしくお願いいたします。 さて、以前「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」というエントリーでFacebookでシェアした時に表示される画像の件を取り上げました。その後Facebookの仕様が変更され、画像の取り扱いが変わりましたので改めて整理してみたいと思います。キーワードは「1200px × 630px」、そして「PNG」です。 以前ご紹介した内容のおさらい 以前のエントリーでご紹介した物を簡単におさらいすると、下記のようになります。 推奨は「1200px × 630px」（縦横比 1.91:1） 最低でも「600px × 315px」 特定の条件で画像の中心部分が正方形にトリミングされる 特に最後の「正方形にトリミング」はPC用ページのタイムラインのみ適用されるという曲者で、対策として下記のよ
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog
こんにちは、ウェブ担当の嶋です。 Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、ユーザー様と情報を相互にやりとりしています。 Facebookは、URLを含む投稿やシェアをすると、自動的にそのURLからタイトルや概要、画像などを取得して表示してくれます。リンクをクリックする前にどんなサイトなのかなんとなくわかるのは非常に便利なのですが、こういう形でシェアされているのをよく見かけませんか？ ページのタイトルや見出しは適切なのですが、サムネイル画像として表示されている画像の左右が切れてしまっています。また、表示されている画像もサイトのトップページを紹介する画像としては適切ではありません。 これはOGP(Open Graph Protocol)の設定が行われ
知っておきたい「これからのWebサイト改善のポイント」｜ iMedio無料セミナー2015年4月9日：r360studio
今回のセミナーについて iMedioおなじみの年度初めの無料セミナー。今年は、「Webサイトの改善」をテーマに２時間お話ししました。ちょうど、4月21日に「Google モバイル対応（モバイルフレンドリー）」を始めるというホットな話題がありましたのでその話と、昨年に引き続き「コンテンツ表現」・「シンプルなデザイン」についてお話ししました。 私自身もまだまだ対策が進んでいませんが、Google検索に反映してくることで“待ったなし“の状況が訪れてしまったようです。このセミナーが、みなさまのWebサイト改善のきっかけになれば幸いです。(^^) セミナーの録画音声 録画したセミナー中の音声も公開します。これは、講師が自身の記録・スキルアップのために録画したもので、音声の品質はあまりよくないのですが、希望される方が多かったので公開いたします。 参加者の方からのひとこと 今回は、出席率が高くて41名の
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった
twitter公式ページのTLにて、画像や著作者のアカウントなどを一緒に表示してくれるTwitterカード。これの画像が最近表示されてないな…と気になっていたのですが、自分のせいでした(;´Д`) 解決に至るまでいろいろ調べたのでメモ的に。 Twitter Cardsとは Twitterカード — Twitter Developers Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。 というもので、公式ページのTLで画像とかいろいろ一緒に表示されて、見栄えが良くなるしクリック率も上がるかも！と、わたしも利用していました。
OGPにおける記述方法の勘違いと修正方法（2015年春時点での最新情報？）
OGPとは OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。 ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。 ここでは主要SNSについて紹介していきます。 あと、HTML5を基本ベースとして書いていますのでその点はご了承ください。 基本的なOGPの設定項目一覧 OGPの記述はの中で行います。 head要素の変更 まずはhead部分にprefixを追加します。 <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"> OGP設定のおまじないみたいなものです。この設定を行う事によってOGPを認識するようです。 注意点ですがog: http://ogp.me/ns#の部分でog:の後は必ず半角スペースを入れて下さい。これはOGP
FacebookのOGPを記事ごとに思い通りに！All in One SEO PackのSocial Metaが便利だった！｜男子ハック
Facebookでシェアされた時にどう表示されるかは重要項目！画像も説明文も思い通り！WordPressでブログやサイト運営をしている人なら一度は耳にしたことがあるくらい有名な「Aii In One SEO Pack」というSEO用のプラグイン。SEO用プラグインとしては現在は「WordPress SEO by Yoast」のほうが評価が高いのですが、「All In One SEO Pack」ではOGPの指定を行うことができます。 「Aii In One SEO Pack」をWordPressにインストールすると、ダッシュボードのサイドバー上にAll In One SEOの項目が追加されます。その中にある「Feature Manager」をクリックし「Social Meta」をActivateします。 今回はFacebookのOGPをちゃんと設定したい！ということで、Social Meta
Facebook OGP画像の最新サイズ（※2014年9月）、もう正方形は不要
↑このイラストが、Facebook OGP画像の最新サイズです（2014年9月末現在） といっても、ちょうど昨年の今頃に一度仕様変更があり、その時に最適なサイズに対応していた場合は今回は特別な対応は不要です。 約1年前、FacebookのニュースフィードのUIが変わり、OGPの画像（og:image）のサイズ仕様が変わりました。 軽くおさらいすると、つい最近まで、OGP画像の推奨サイズは下記のような形でした。 なんで正方形で作成しなければいけないかと言うと、今までは「PC版のユーザーのタイムライン」を見た場合のみ、og:imageが正方形で表示されていたからなんですね。 FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） https://snowadays.jp/2013/09/2106 Face
FacebookのOGP画像に「顔」が入っている場合のトリミング位置についてまとめ
FacebookのOGP画像のサイズと、ニュースフィードでの表示サイズについては、過去にも数回に渡ってまとめていますが、今回は画像の中に人間の顔が入っている場合の動きについて検証してみます。 どうやら、画像内に人間の顔が入っている場合、トリミングの仕様が通常とは異なり、顔の位置を自動検出してそこを起点にトリミングを行うようです。 なんと言う余計なお世話ハイテクシステム！ ※過去のFacebook OGP画像関連のまとめ FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） FacebookのOGP画像、最新サイズでの作成例をご紹介 本題に入る前に、簡単におさらいです。 FacebookのOGP画像のニュースフィード上のサイズは、w1.91：h1 w468px以上でないと大きく表示されない（※Face
Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK） | 初代編集長ブログ―安田英久
今日は、Twitterが本格的に展開を進めている「Twitter Cards（ツイッターカード）」を表示するための、サイトの変更方法を解説します。Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトなら、10分で完了するような内容です。 2012-09-06： 申請後しばらくしたら、自分のアカウントでカードが表示されるようになり、Web担のサイトのURLでカードが表示されるようになりました。 Twitter Cards（カード）とは？Twitter Cardとは、Twitterが進めているツイート表示のリッチ化の仕組みのこと。ツイート内にURLが含まれている場合に、ツイートの詳細表示でそのページのタイトルや概要、アイコン写真などを表示するものです。 このカード表示は6月にスタートしたのですが、まだすべてのTwitterアカウントで有効になっているわけではなく、カ
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
OGPの「fb:app_id」とか「fb:admins」って何のために必要なの？
さて。OGPについてのエントリーを書いたばかりですが。 色々頑張って、このブログのOGPは↓こんな感じになりました。 <meta property="fb:app_id" content="1234567890" /> <meta property="og:type" content="blog"> <meta property="og:description" content="***記事抜粋***"> <meta property="og:title" content="***記事タイトル***"> <meta property="og:url" content="***記事URL***"> <meta property="og:site_name" content="Sunday In The Park"> <meta property="og:image" content="htt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
Pinterest Developers
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
https://dev.twitter.com/ja/docs/cards