質問編集履歴
4
htmlを画像を貼り付けていたのを、コードに変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -139,8 +139,61 @@
|
|
|
139
139
|
|
|
140
140
|
#追記2
|
|
141
141
|
###上手くいくほう
|
|
142
|
-
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
<!DOCTYPE html>
|
|
145
|
+
<html lang="ja">
|
|
146
|
+
<head>
|
|
147
|
+
<meta charset="UTF-8">
|
|
148
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
149
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
150
|
+
|
|
151
|
+
<meta name="description" content="デスクリプション">
|
|
152
|
+
<meta property="og:site_name" content="サイト名"/>
|
|
153
|
+
<meta property="og:type" content="website"/>
|
|
154
|
+
<meta property="og:title" content="タイトル"/>
|
|
155
|
+
<meta property="og:description" content="デスクリプション"/>
|
|
156
|
+
<meta property="og:url" content="サイトURL"/>
|
|
157
|
+
<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"/>
|
|
158
|
+
<meta property="og:locale" content="ja_JP"/>
|
|
159
|
+
<meta name="twitter:card" content="summary_large_image"/>
|
|
160
|
+
<meta name="twitter:title" content="タイトル"/>
|
|
161
|
+
<meta name="twitter:description" content="デスクリプション"/>
|
|
162
|
+
<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"/>
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
|
|
166
|
+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
167
|
+
|
|
168
|
+
</head>
|
|
169
|
+
```
|
|
143
170
|
|
|
144
171
|
###失敗するほう
|
|
145
|
-
|
|
172
|
+
```
|
|
173
|
+
<!DOCTYPE html>
|
|
174
|
+
<html lang="ja">
|
|
175
|
+
<head>
|
|
176
|
+
<meta charset="UTF-8">
|
|
177
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
178
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
179
|
+
|
|
180
|
+
<meta name="description" content="デスクリプション">
|
|
181
|
+
<meta property="og:site_name" content="サイト名"/>
|
|
182
|
+
<meta property="og:type" content="website"/>
|
|
183
|
+
<meta property="og:title" content="タイトル"/>
|
|
184
|
+
<meta property="og:description" content="デスクリプション"/>
|
|
185
|
+
<meta property="og:url" content="サイトURL"/>
|
|
186
|
+
<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"/>
|
|
187
|
+
<meta property="og:locale" content="ja_JP"/>
|
|
188
|
+
<meta name="twitter:card" content="summary_large_image"/>
|
|
189
|
+
<meta name="twitter:title" content="タイトル"/>
|
|
190
|
+
<meta name="twitter:description" content="デスクリプション"/>
|
|
191
|
+
<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"/>
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
|
|
195
|
+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
196
|
+
|
|
197
|
+
</head>
|
|
198
|
+
```
|
|
146
199
|
|
3
画像の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -135,4 +135,12 @@
|
|
|
135
135
|
```
|
|
136
136
|
該当ファイルを追記しました。
|
|
137
137
|
また自分で別のLaravelプロジェクトを作り、そこで同じコードでTwitter card Validatorをやってみるとちゃんと表示されました。
|
|
138
|
-
現在のLaravelプロジェクトのみ表示されないようです。。。
|
|
138
|
+
現在のLaravelプロジェクトのみ表示されないようです。。。
|
|
139
|
+
|
|
140
|
+
#追記2
|
|
141
|
+
###上手くいくほう
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
###失敗するほう
|
|
145
|
+
|
|
146
|
+
|
2
追記の説明文を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -132,4 +132,7 @@
|
|
|
132
132
|
hogehoge
|
|
133
133
|
</div>
|
|
134
134
|
@endsection
|
|
135
|
-
```
|
|
135
|
+
```
|
|
136
|
+
該当ファイルを追記しました。
|
|
137
|
+
また自分で別のLaravelプロジェクトを作り、そこで同じコードでTwitter card Validatorをやってみるとちゃんと表示されました。
|
|
138
|
+
現在のLaravelプロジェクトのみ表示されないようです。。。
|
1
実際のソースコードを掲載します。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -73,4 +73,63 @@
|
|
|
73
73
|
<meta name="twitter:title" content="sitename"/>
|
|
74
74
|
<meta name="twitter:description" content="description"/>
|
|
75
75
|
<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"/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
#追記
|
|
79
|
+
継承元のレイアウト
|
|
80
|
+
views/Layout/main.blade.php
|
|
81
|
+
```
|
|
82
|
+
<!DOCTYPE html>
|
|
83
|
+
<html lang="ja">
|
|
84
|
+
<head>
|
|
85
|
+
<meta charset="UTF-8">
|
|
86
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
87
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
88
|
+
<meta name="description" content="デスクリプション">
|
|
89
|
+
@yield('ogp')
|
|
90
|
+
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
|
|
91
|
+
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
|
|
92
|
+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
93
|
+
@hasSection('title')
|
|
94
|
+
<title>@yield('title') | {{ config('app.name') }}</title>
|
|
95
|
+
@else
|
|
96
|
+
<title>{{ config('app.name') }}</title>
|
|
97
|
+
@endif
|
|
98
|
+
</head>
|
|
99
|
+
<body>
|
|
100
|
+
<header>
|
|
101
|
+
ヘッダー
|
|
102
|
+
</header>
|
|
103
|
+
<div class="bg-gray-100 flex-grow">
|
|
104
|
+
<div class="flex-grow">
|
|
105
|
+
@yield('main')
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<footer>
|
|
109
|
+
フッター
|
|
110
|
+
</footer>
|
|
111
|
+
</body>
|
|
112
|
+
</html>
|
|
113
|
+
```
|
|
114
|
+
content.blade.php
|
|
115
|
+
```
|
|
116
|
+
@extends('Layout.main')
|
|
117
|
+
@section('ogp')
|
|
118
|
+
<meta property="og:site_name" content="サイト名"/>
|
|
119
|
+
<meta property="og:type" content="website"/>
|
|
120
|
+
<meta property="og:title" content="タイトル"/>
|
|
121
|
+
<meta property="og:description" content="デスクリプション"/>
|
|
122
|
+
<meta property="og:url" content="サイトURL/>
|
|
123
|
+
<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"/>
|
|
124
|
+
<meta property="og:locale" content="ja_JP"/>
|
|
125
|
+
<meta name="twitter:card" content="summary_large_image"/>
|
|
126
|
+
<meta name="twitter:title" content="タイトル"/>
|
|
127
|
+
<meta name="twitter:description" content="デスクリプション"/>
|
|
128
|
+
<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"/>
|
|
129
|
+
@endsection
|
|
130
|
+
@section('main')
|
|
131
|
+
<div>
|
|
132
|
+
hogehoge
|
|
133
|
+
</div>
|
|
134
|
+
@endsection
|
|
76
135
|
```
|