hello-world.jp.net
webエンジニアのメモ。とりあえずやってみる。

[s3][ruby]静的ウェブサイトホスティングしたサイトのTwitter Cardsが表示されない場合の対応

公開日時

先日、S3の静的ウェブサイトホスティングを使ってサイト公開を行った際に、ページ表示やFacebookのOGP表示は問題なくできるのにTwitter Cardsだけ表示されない、という現象が発生しました。

Card ValidatorにURLを入れてみると、以下のようにページは読み込めるもののメタタグが存在しないというエラーになっていました。

twcard1

INFO: Page fetched successfully

WARN: No metatags found

Chromeのデベロッパーツールを使って、正しく表示されているサイトと今回のサイトを比べていたところ、今回のサイトはレスポンスヘッダにContent-Typeがついていないことに気づきました。

Content-Type:text/html

今回のサイトはrubyの aws-sdkを使ってアップロードを行っていたのですが、アップロード時に自動でContent-Typeは付与してくれないので明示的に指定する必要がありました

Content-Typeの判定について調べていたところ、 mime-types gemを使って判定するのがよさそうだったので、以下のようなアップロードクラスを用意して、アップロード時にContent-Typeを判定して指定するようにしました。

  • Gemfile
gem 'aws-sdk', '~> 2'
gem 'mime-types'
  • s3_uploader.rb
class S3Uploader
  include Singleton

  def initialize
    @s3 = Aws::S3::Client.new
    @bucket = Rails.application.secrets.aws_s3_bucket
  end

  def put(file_path)
    content_type = MIME::Types.type_for(file_path).last.to_s # <= content-typeを取得
    @s3.put_object(
      bucket: @bucket,
      body: File.open(file_path),
      key: file_path.gsub("#{Rails.public_path}/", ''),
      acl: 'public-read',
      content_type: content_type  # <= content-typeを指定
    )
  end

  def delete(file_name)
    @s3.delete_object(
      bucket: @bucket,
      key: file_name
    )
  end
end

ファイルをアップロードする際は、以下のように呼び出すことでアップロードできます。

S3Uploader.instance.put(path)

Content-Typeを指定するようにして再度アップロードを行い、Card Validatorを通してみたら、無事にTwitter Cardsが表示されました。

というわけで静的ウェブサイトホスティングしたサイトのTwitter Cardsが表示されない場合は、Content-Typeの有無をチェックしてみてください。

参考


Related #Rails

railsとsinatraの使い分け

sinatraでアプリを作っていたら、色々機能が足りなかったので継ぎ足し継ぎ足しで色々増やしていったら結局railsのようなもの、になってしまいました。

[mysql][rails]Character set 'utf8mb4' is not a compiled character set and is not specified in the '/usr/share/mysql/charsets/Index.xml' file

mysql5.1が動いていた環境をmysql5.6にアップデートした後、rake db:createで utf8mb4のDBを作成しようとしたところ以下のエラーが発生

[rails]omniauth-twitterで大きいサイズ(bigger)のプロフィール画像を取得する

ruby2.1, rails4.1.1で確認 omniauth-twitterを使ってtwitter認証を行った際にプロフィール画像を取得したかったのですが、デフォルト設定だと、`auth['info']['image']` に入ってくる画像URLの画像サイズが小さいので、大きい画像を取得するようにしました。

[rails]erbとunderscore.jsを一緒に使ったらundefined local variables in templatesエラーが発生

erbのテンプレート内にunderscore.js用のテンプレートを記述していたら