I need to add canonical URLs to the pages of my Laravel project as in the example below.
example:
For the about page for example it should print out <link rel="canonical" href="https://omnicourse.io/about">
In order to add them to my pages, I need to add them inside the <head> blocks. However, the <head> blocks of the pages come from layouts\app.blade.php and therefore they all get the same blocks. As an example, I leave an index.blade.php and app.blade.php file below. How can I add a separate <head> block to the example index.blade.php file I gave.
index.blade.php
@extends('layouts.app')
@section('content')
<div >
<div >
<h2 >Our mission</h2>
<p >Giving knowledge a voice</p>
<h5 >Omnicourse believes audio makes it easier for experts to bring their knowledge to life and that the world needs a simple platform where expertise can be shared.</h5>
</div>
<img src="{{ asset('assets/images/mockup-1.png') }}" alt="">
</div>
<div >
<div >
<h2 >Our intent</h2>
<ul >
<li><h5 >Simplifying eLearning</h5></li>
<li><h5 >Empowering teaching</h5></li>
<li><h5 >Bringing knowledge to life</h5></li>
</ul>
</div>
</div>
<div >
<div>
<h2 >Our name</h2>
<h5 >According to Urban Dictionary, 'Omnicourse' is</h5>
<ul >
<li ><h5>A powerfully connecting experience.</h5></li>
<li ><h5>To experience someone in a complete and utterly all encompassing fashion.</h5></li>
<li ><h5>To reciprocally share ones physicality, feelings, thoughts, memories & more.</h5></li>
</ul>
<h5 >That about sums us up.</h5>
</div>
</div>
<div >
<h2 >Create. Share. Learn.</h2>
<div >
<div>
<p >We all spend too much time staring at screens. Omnicourse is an accessible way to learn. You don't need to focus on your screen; you don't have to leave everything aside; you need to put on your headphones and listen to learn ―while doing whatever you want to be doing.</p>
<p >Omnicourse enables learners to step away from the screen and consume without distractions. Audio courses are great for commuting, running, or doing housework.</p>
<p >With Omnicourse, you can turn your spare listening time into productive learning time.</p>
<p >We provide a solution to the knowledge gap; you learn at your own pace. </p>
</div>
<div>
<p >eLearning as an industry is changing, and creators feel that change. Without messy video editing and technical expertise, they want a platform to share what they know conveniently. </p>
<p >Omnicourse provides creators with all the tools and helps them share what they know on the Omnicourse platform. </p>
</div>
</div>
</div>
@endsection
app.blade.php
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('assets/css/style.css')}}" rel="stylesheet" />
<title>omnicourse ― Grow your skills with audio courses</title>
<meta name="title" content="omnicourse ― Grow your skills with audio courses">
<meta name="description" content="omnicourse is a subscription-based capsule-sized audio course platform for mobile where lecturers can get paid by the minutes listened.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://omnicourse.io/">
<meta property="og:title" content="omnicourse ― Grow your skills with audio courses">
<meta property="og:description" content="omnicourse is a subscription-based capsule-sized audio course platform for mobile where lecturers can get paid by the minutes listened.">
<meta property="og:image" content="@yield('og_image', asset('assets/images/logo-circle.jpg'))">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://omnicourse.io/">
<meta property="twitter:title" content="omnicourse ― Grow your skills with audio courses">
<meta property="twitter:description" content="omnicourse is a subscription-based capsule-sized audio course platform for mobile where lecturers can get paid by the minutes listened.">
<meta property="twitter:image" content="@yield('twitter_image', asset('assets/images/logo-circle.jpg'))">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/favicon/apple-touch-icon.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/favicon/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/favicon/favicon-16x16.png')}}">
<link rel="manifest" href="{{ asset('assets/favicon/site.webmanifest')}}">
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l=' l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=' i dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KDBG3WH');</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDBG3WH" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script type="text/javascript">
function initDesk360Chat() {
window.desk360Chat.init({
token: "cZteL2U9khzVrahABDBS4NSLNXGixkfED9SDLAcDrGjuRJky88VYdKW11CBH1aJ6UCQggMGPSURO2OkG",
host: "https://omnicourse.desk360.com/"
});
}
function initialize(t,i){var e,a=btoa((new Date).toDateString()).toLowerCase();t.getElementById(i)?initDesk360Chat():((e=t.createElement("script")).id=i,e.async=!0,e.src="https://omnicourse.desk360.com/widgets/chat/sdk.js?".concat(a),e.onload=initDesk360Chat,t.head.appendChild(e))}function initiateCall(){initialize(document,"desk360chat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>
<div >
<header >
<a href="/">
<img src="{{ asset('assets/images/logo.svg')}}" alt="omnicourse ― Grow your skills with audio courses">
</a>
<nav >
<ul >
<li><a href="/about" >About</a></li>
<li><a href="/faq" >FAQ</a></li>
<li><a href="/creators" >Become a Creator</a></li>
<li><a href="https://creator.omnicourse.io/" target="_blank" >Creator Center</a></li>
</ul>
</nav>
<button >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="#192648" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
</button>
</header>
@if($errors->any())
{!! implode('', $errors->all('<div role="alert"><img src="'.asset("assets/images/warning_error.png").'" width="40" height="40"><br><strong >:message</strong></div>')) !!}
@endif
@yield('content')
<footer >
<div >
<h6 >omnicourse</h6>
<div >
<a href="/about" >About omnicourse</a>
<a href="https://creator.omnicourse.io/" target="_blank" >Creator Center </a>
<a href="/identity" >Company Culture</a>
<a href="/creators" >Become a Creator</a>
<a href="/faq" >Frequently Asked Questions</a>
<a href="/privacy-policy" >Privacy Policy</a>
<a href="/terms-of-use" >Terms and Conditions</a>
</div>
</div>
<div >
<h6 >Social</h6>
<div >
<a href="https://www.linkedin.com/company/omnicourse/" target="_blank" >Linkedin</a>
<a href="https://medium.com/@omnicourse" target="_blank" >Medium</a>
<a href="https://www.instagram.com/omnicourse/" target="_blank" >Instagram</a>
<a href="https://twitter.com/omnicourse/" target="_blank" >Twitter</a>
</div>
</div>
<div >
<h6 >Contact</h6>
<a href="mailto:[email protected]" >[email protected]</a>
</div>
<div >
<a href="https://omnicourse.io" ><img src="{{ asset('assets/images/logo.svg') }}" style="height:25px" alt=""></a>
<p >Copyright © 2022 Omnicourse, Inc.</p>
</div>
</footer>
</div>
<div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
<div >
<div aria-hidden="true"></div>
<div >
<div >
<div >
<button type="button" >
<span >Close panel</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div >
<div >
<h2 id="slide-over-title">
Menu
</h2>
</div>
<div >
<div >
<div aria-hidden="true">
<ul>
<li ><a href="/creators" >Become a Creator</a> </li>
<li ><a href="/content-upload" >Upload Content</a> </li>
<li ><a href="/about" >About omnicourse</a> </li>
<li ><a href="/faq" >Frequently Asked Questions</a> </li>
<li ><a href="https://www.linkedin.com/company/omnicourse/" >LinkedIn</a> </li>
<li ><a href="https://medium.com/@omnicourse" >Medium</a> </li>
<li ><a href="https://www.innstagram.com/omnicourse" >Instagram</a> </li>
<li ><a href="https://www.twitter.com/omnicourse" >Twitter</a> </li>
<li ><a href="/privacy-policy" >Privacy Policy</a> </li>
<li ><a href="/terms-of-use" >Terms Of Use</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>
<script>
$(document).ready(function() {
$('body').find('.upload-button-mini').each(function(){
var $this = $(this);
var completeClass = 'complate';
var completeText = 'File Upload Completed.';
var textItem = $this.find('#fileLimitOrText');
$(this).find('[type="file"]').change(function(e) {
var fileName = this.files[0].name;
textItem.text(fileName);
$this.find('#uploadButtonTitle').text(completeText);
$this.addClass(completeClass);
});
});
$('body').on('click', '.copybtn', function() {
var copyText = $(this).data('copydata');
console.log(copyText)
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("URL Copied: " copyText);
})
})
</script>
</body>
</html>
CodePudding user response：
In your app.blade.php file. Add this line of code to the top.
<link rel="canonical" href="{{ request()->url() }}">
request()->url() gets the current url of that page.
This way all your pages will get a unique canonical url.
CodePudding user response：
It's not valid by standard document. You can not use more than one head block inside HTML document.
But for your problem you can do this tricks by adding in head block in main file.
<link rel="canonical" href={{URL::current()}} />