Q&A
metaタグだけで何かできる仕様でしたっけ
HTMLとして何もどこにも書いてないなら何も出ないと思うのですが。
実現したいこと
Twitter投稿時にツイッターカードを表示させたい
Laravel7を使っていて
サーバーはherokuを使っています
このサイトを参考にしています
https://catnose99.com/cloudinary-dynamic-ogp-image/
#悩んでいること
設定自体はできてると思っているのですが、Twitter Card validatorで確認したところ
ーーーーーーーーーーーーーーーーーーーーーーー
INFO: Page fetched successfully
WARN: No metatags found
ーーーーーーーーーーーーーーーーーーーーーーー
との表示がされます。実際にURL付きでツイートをしてみても何も表示されません
robots.txtや.htaccessで特に制限はしていない
画像が指定してあるURLを叩けばアクセスできる
OGPの設定を確認するchromeの拡張機能では設定通りの文言や画像が表示されている
chromeの「検証」でもメタタグが表示されている
のような感じです
いろいろ調べましたが、自分では検討がつかなくなってきましたので、どなたか助けて欲しいです。。。
よろしくお願いします！
参考
下記に、実際の設定内容を添付します
robots.txt(laravelデフォルト)
User-agent: * Disallow:
.htaccess(laravelデフォルト)
<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Send Requests To Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>
<meta property="og:site_name" content="sitename"/> <meta property="og:type" content="website"/> <meta property="og:title" content="title"/> <meta property="og:description" content="description"/> <meta property="og:url" content="https://xxx.net"/> <meta property="og:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <meta property="og:locale" content="ja_JP"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="sitename"/> <meta name="twitter:description" content="description"/> <meta name="twitter:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/>
#追記
継承元のレイアウト
views/Layout/main.blade.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="デスクリプション"> @yield('ogp') <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> @hasSection('title') <title>@yield('title') | {{ config('app.name') }}</title> @else <title>{{ config('app.name') }}</title> @endif </head> <body> <header> ヘッダー </header> <div class="bg-gray-100 flex-grow"> <div class="flex-grow"> @yield('main') </div> </div> <footer> フッター </footer> </body> </html>
content.blade.php
@extends('Layout.main') @section('ogp') <meta property="og:site_name" content="サイト名"/> <meta property="og:type" content="website"/> <meta property="og:title" content="タイトル"/> <meta property="og:description" content="デスクリプション"/> <meta property="og:url" content="サイトURL/> <meta property="og:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <meta property="og:locale" content="ja_JP"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="タイトル"/> <meta name="twitter:description" content="デスクリプション"/> <meta name="twitter:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> @endsection @section('main') <div> hogehoge </div> @endsection
該当ファイルを追記しました。
また自分で別のLaravelプロジェクトを作り、そこで同じコードでTwitter card Validatorをやってみるとちゃんと表示されました。
現在のLaravelプロジェクトのみ表示されないようです。。。
#追記2
###上手くいくほう
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="デスクリプション"> <meta property="og:site_name" content="サイト名"/> <meta property="og:type" content="website"/> <meta property="og:title" content="タイトル"/> <meta property="og:description" content="デスクリプション"/> <meta property="og:url" content="サイトURL"/> <meta property="og:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <meta property="og:locale" content="ja_JP"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="タイトル"/> <meta name="twitter:description" content="デスクリプション"/> <meta name="twitter:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> </head>
###失敗するほう
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="デスクリプション"> <meta property="og:site_name" content="サイト名"/> <meta property="og:type" content="website"/> <meta property="og:title" content="タイトル"/> <meta property="og:description" content="デスクリプション"/> <meta property="og:url" content="サイトURL"/> <meta property="og:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <meta property="og:locale" content="ja_JP"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="タイトル"/> <meta name="twitter:description" content="デスクリプション"/> <meta name="twitter:image" content="https://res.cloudinary.com/dajbcpqeh/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです！,co_rgb:333,w_500,c_fit/c_scale,h_420/v1623414920/ogp_ibkw4a.png"/> <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> </head>
記載のmetaタグがhead要素内にちゃんと入っているかどうか確認してみてください。
少なくとも記載のmetaタグをコピーして作ったtwitter cardはcard validatorで正常に通りました。
可能であれば問題が再現するHTMLを丸ごと本文に追記すると、他の方が再現テストしやすくなると思います。
@m.ts10806さん
メタタグだけでなく、他のコードもあります。追記をしましたので、見ていただけると幸いです。よろしくお願いします。
@hope_mucciさん
HTMLを追記しました。見ていただけると幸いです。
phpのコードではなく、ブラウザで見た際のソースを追加してください。
「最終的にレンダリングされた出力」で比較しないと意味がありません。
また、新しくLaravelプロジェクトを作成して出力したHTMLではvalidatorが通っているとのことなので、そちらのHTMLソースと問題のプロジェクトの方のHTMLソースを比較してみましょう。それで問題点が分かるかもしれません。
@hope_mucciさん
レンダリングのスクリーンショットを追記しました。出力されているコードは同じに見えます。。。
なぜHTMLのソースだけ画像で貼るのでしょうか。比較しずらくてしょうがない・・・
画像比較したらピクセルパーフェクトで全く同じでした。
そうすると別の環境要因じゃないでしょうか。例えばrobots.txtの設定でブロックされているとか、URLが間違っている(404)、301や302を返している（リダイレクト）など、とにかくHTTPステータスが200以外の場合は上記のような表示になるようです。
（だったらなんで fetched successfully って言ってるんだ、と言いたくなる）
@hope_mucciさん
失礼しました、、、画像ではなくしました。
掲載の通りrobots.txtはなにもブロックしていないですし、OGPが正しく表示されるプロジェクトも同じ記述になっています。
OGPが表示されない方のプロジェクトではTailwindを使っていて、上手く表示されるほうのプロジェクトでは、Tailwindは使っていないのですが、こちらはなにかしらの関係はありそうですかね？
ちなみに両者のlaravelのバージョンは
上手くいく方: 7.16.1
失敗する方 : 7.30.4
です。
ーーー追記ーーー
facebookではOGP表示されました。。。
> OGPが表示されない方のプロジェクトではTailwindを使っていて、上手く表示されるほうのプロジェクトでは、Tailwindは使っていないのですが、こちらはなにかしらの関係はありそうですかね？
> ちなみに両者のlaravelのバージョンは（略）
聞くが前に実験しましょう。
あとは、Twitter deveopment communityで聞いてみるか、ですね。
https://twittercommunity.com/search?q=WARN%3A%20%20No%20metatags%20found%20category%3A8
割と事例も多いです。全部読んでみてください。全く同じタグで当該サーバのページだけ表示されていないので、環境要因でまず間違いないと思います。
サーバでDDoS対策をしている、特定のリクエストヘッダをプラグインではじいている、.htaccessが適切に設定できていない（content-typeがtext/html; charset=utf8でないといけないらしい）、など複数の原因が挙げられています。要はtwitterのクローラがブロックされているということなのでWebサーバのアクセスログ等も見て原因を探ると良いかと思います。
あと、稀に運営側から応答があるようです。（Twitter側からアクセスしたけど500が返ってきたぞ、みたいな返答しているスレッドがあります）
現物の現象を確認できない（URL教えてもらえれば確認できますけど）のでこれ以上のアドバイスはできそうにないです。あしからず。
数日に渡りご対応頂きありがとうございます。
再度いろいろ確認してみます。
あなたの回答
tips
プレビュー
