[s3][ruby]静的ウェブサイトホスティングしたサイトのTwitter Cardsが表示されない場合の対応
先日、S3の静的ウェブサイトホスティングを使ってサイト公開を行った際に、ページ表示やFacebookのOGP表示は問題なくできるのにTwitter Cardsだけ表示されない、という現象が発生しました。
Card ValidatorにURLを入れてみると、以下のようにページは読み込めるもののメタタグが存在しないというエラーになっていました。
INFO: Page fetched successfully
WARN: No metatags foundChromeのデベロッパーツールを使って、正しく表示されているサイトと今回のサイトを比べていたところ、今回のサイトはレスポンスヘッダに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の有無をチェックしてみてください。