質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

1100閲覧

【Rails】Twitter Cardで画像を表示させるには?

tukatti7772

総合スコア20

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

2グッド

5クリップ

投稿2017/11/06 12:19

Ruby on Rails4で作成したwebアプリ(Herokuで公開)について、
メタタグを設定してtwitterカードを表示できるようにしようと思い、
/layouts/application.html.erbの<head>タグ内に、
下記のような記述をしました。

<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@twitterID" /> <meta property="og:url" content="https://..." /> <meta property="og:title" content="アプリケーション名" /> <meta property="og:description" content="○○○" /> <meta property="og:image" content="<%= asset_path('fortwitter.jpg') %>" />

画像ファイル名はfortwitter.jpgで、assets/image以下に格納しています。

その後twitterのcard validatorでアドレスを入力し、
~is whitelisted for summary card.と出ますが、
なぜか画像だけ表示されません。何故なのでしょうか??

画像は1MB以下ですし、twitter側の設定も問題ないように思うのですが。。

DrqYuto, gesorein👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

og:*** は Facebook 向けの property です。
Twitter の場合は、以下のように twitter:image を設定してください。

<meta name="twitter:image" content="<%= asset_url('fortwitter.jpg') %>" />

絶対リンクにするため asset_url を使用しています。
念のため、ほかの Twiiter 用の meta タグも付けたほうが良いかもしれません。

<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@twitterID" /> <meta name="twitter:title" content="アプリケーション名" /> <meta name="twitter:description" content="○○○" /> <meta name="twitter:image" content="<%= asset_url('fortwitter.jpg') %>" />

詳しい情報は以下の URL に記載されていますので、参考にしてみてください。
Optimize Tweets with Cards

投稿2017/11/07 02:39

編集2017/11/09 03:19
gesorein

総合スコア101

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tukatti7772

2017/11/08 22:39

ありがとうございます。 回答いただいたコードを追記しましたが、画像は表示されませんでした・・。 例えばLINEなどでアドレスを入れると、ちゃんと画像も表示されるのですが。 twitterだけうまくいかないように思います。
gesorein

2017/11/09 00:48 編集

Twitter Card の画像は絶対パスを設定する必用があるようで、 asset_path ではなく asset_url にしてみるとどうでしょうか? ※回答も編集しました
tukatti7772

2017/11/09 11:17

asset_urlに変えたところ、画像が表示されるようになりました! 素晴らしいです・・。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問