質問編集履歴

4

htmlを画像を貼り付けていたのを、コードに変更

2021/06/17 11:37

投稿

daaaichifu
daaaichifu

スコア16

test CHANGED
File without changes
test CHANGED
@@ -280,12 +280,118 @@
280
280
 
281
281
  ###上手くいくほう
282
282
 
283
- ![イメージ説明](5c57445f1a7b752f204df849ab83ce17.png)
283
+ ```
284
+
285
+
286
+
287
+ <!DOCTYPE html>
288
+
289
+ <html lang="ja">
290
+
291
+ <head>
292
+
293
+ <meta charset="UTF-8">
294
+
295
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
296
+
297
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
298
+
299
+
300
+
301
+ <meta name="description" content="デスクリプション">
302
+
303
+ <meta property="og:site_name" content="サイト名"/>
304
+
305
+ <meta property="og:type" content="website"/>
306
+
307
+ <meta property="og:title" content="タイトル"/>
308
+
309
+ <meta property="og:description" content="デスクリプション"/>
310
+
311
+ <meta property="og:url" content="サイトURL"/>
312
+
313
+ <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"/>
314
+
315
+ <meta property="og:locale" content="ja_JP"/>
316
+
317
+ <meta name="twitter:card" content="summary_large_image"/>
318
+
319
+ <meta name="twitter:title" content="タイトル"/>
320
+
321
+ <meta name="twitter:description" content="デスクリプション"/>
322
+
323
+ <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"/>
324
+
325
+
326
+
327
+
328
+
329
+ <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
330
+
331
+ <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
332
+
333
+
334
+
335
+ </head>
336
+
337
+ ```
284
338
 
285
339
  ![イメージ説明](acd67afa40a2d80bd00e5c73bd95489a.png)
286
340
 
287
341
  ###失敗するほう
288
342
 
289
- ![イメージ説明](96bff3037f39bea424761ce91aeb4f74.png)
343
+ ```
344
+
345
+ <!DOCTYPE html>
346
+
347
+ <html lang="ja">
348
+
349
+ <head>
350
+
351
+ <meta charset="UTF-8">
352
+
353
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
354
+
355
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
356
+
357
+
358
+
359
+ <meta name="description" content="デスクリプション">
360
+
361
+ <meta property="og:site_name" content="サイト名"/>
362
+
363
+ <meta property="og:type" content="website"/>
364
+
365
+ <meta property="og:title" content="タイトル"/>
366
+
367
+ <meta property="og:description" content="デスクリプション"/>
368
+
369
+ <meta property="og:url" content="サイトURL"/>
370
+
371
+ <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"/>
372
+
373
+ <meta property="og:locale" content="ja_JP"/>
374
+
375
+ <meta name="twitter:card" content="summary_large_image"/>
376
+
377
+ <meta name="twitter:title" content="タイトル"/>
378
+
379
+ <meta name="twitter:description" content="デスクリプション"/>
380
+
381
+ <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"/>
382
+
383
+
384
+
385
+
386
+
387
+ <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
388
+
389
+ <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
390
+
391
+
392
+
393
+ </head>
394
+
395
+ ```
290
396
 
291
397
  ![イメージ説明](1e4df767e71844baf89f535f67cdd212.png)

3

画像の追加

2021/06/17 11:37

投稿

daaaichifu
daaaichifu

スコア16

test CHANGED
File without changes
test CHANGED
@@ -273,3 +273,19 @@
273
273
  また自分で別のLaravelプロジェクトを作り、そこで同じコードでTwitter card Validatorをやってみるとちゃんと表示されました。
274
274
 
275
275
  現在のLaravelプロジェクトのみ表示されないようです。。。
276
+
277
+
278
+
279
+ #追記2
280
+
281
+ ###上手くいくほう
282
+
283
+ ![イメージ説明](5c57445f1a7b752f204df849ab83ce17.png)
284
+
285
+ ![イメージ説明](acd67afa40a2d80bd00e5c73bd95489a.png)
286
+
287
+ ###失敗するほう
288
+
289
+ ![イメージ説明](96bff3037f39bea424761ce91aeb4f74.png)
290
+
291
+ ![イメージ説明](1e4df767e71844baf89f535f67cdd212.png)

2

追記の説明文を追加

2021/06/16 13:47

投稿

daaaichifu
daaaichifu

スコア16

test CHANGED
File without changes
test CHANGED
@@ -267,3 +267,9 @@
267
267
  @endsection
268
268
 
269
269
  ```
270
+
271
+ 該当ファイルを追記しました。
272
+
273
+ また自分で別のLaravelプロジェクトを作り、そこで同じコードでTwitter card Validatorをやってみるとちゃんと表示されました。
274
+
275
+ 現在のLaravelプロジェクトのみ表示されないようです。。。

1

実際のソースコードを掲載します。

2021/06/16 12:52

投稿

daaaichifu
daaaichifu

スコア16

test CHANGED
File without changes
test CHANGED
@@ -149,3 +149,121 @@
149
149
  <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"/>
150
150
 
151
151
  ```
152
+
153
+
154
+
155
+ #追記
156
+
157
+ 継承元のレイアウト
158
+
159
+ views/Layout/main.blade.php
160
+
161
+ ```
162
+
163
+ <!DOCTYPE html>
164
+
165
+ <html lang="ja">
166
+
167
+ <head>
168
+
169
+ <meta charset="UTF-8">
170
+
171
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
172
+
173
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
174
+
175
+ <meta name="description" content="デスクリプション">
176
+
177
+ @yield('ogp')
178
+
179
+ <link href="{{ asset('css/app.css') }}" rel="stylesheet">
180
+
181
+ <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
182
+
183
+ <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
184
+
185
+ @hasSection('title')
186
+
187
+ <title>@yield('title') | {{ config('app.name') }}</title>
188
+
189
+ @else
190
+
191
+ <title>{{ config('app.name') }}</title>
192
+
193
+ @endif
194
+
195
+ </head>
196
+
197
+ <body>
198
+
199
+ <header>
200
+
201
+ ヘッダー
202
+
203
+ </header>
204
+
205
+ <div class="bg-gray-100 flex-grow">
206
+
207
+ <div class="flex-grow">
208
+
209
+ @yield('main')
210
+
211
+ </div>
212
+
213
+ </div>
214
+
215
+ <footer>
216
+
217
+ フッター
218
+
219
+ </footer>
220
+
221
+ </body>
222
+
223
+ </html>
224
+
225
+ ```
226
+
227
+ content.blade.php
228
+
229
+ ```
230
+
231
+ @extends('Layout.main')
232
+
233
+ @section('ogp')
234
+
235
+ <meta property="og:site_name" content="サイト名"/>
236
+
237
+ <meta property="og:type" content="website"/>
238
+
239
+ <meta property="og:title" content="タイトル"/>
240
+
241
+ <meta property="og:description" content="デスクリプション"/>
242
+
243
+ <meta property="og:url" content="サイトURL/>
244
+
245
+ <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"/>
246
+
247
+ <meta property="og:locale" content="ja_JP"/>
248
+
249
+ <meta name="twitter:card" content="summary_large_image"/>
250
+
251
+ <meta name="twitter:title" content="タイトル"/>
252
+
253
+ <meta name="twitter:description" content="デスクリプション"/>
254
+
255
+ <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"/>
256
+
257
+ @endsection
258
+
259
+ @section('main')
260
+
261
+ <div>
262
+
263
+ hogehoge
264
+
265
+ </div>
266
+
267
+ @endsection
268
+
269
+ ```