[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の有無をチェックしてみてください。

参考