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 layoutsapp.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 class="bg-pippin p-12 rounded-t-2xl relative">
<div class="lg:w-3/5 w-full">
<h2 class="lg:text-8xl text-4xl font-argent">Our mission</h2>
<p class="my-5">Giving knowledge a voice</p>
<h5 class="lg:text-3xl text-xl">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') }}" class="lg:block hidden absolute right-16 top-10 w-72" alt="">
</div>
<div class="bg-soft-blue p-12">
<div class="lg:w-3/5 w-full">
<h2 class="lg:text-8xl text-4xl font-argent">Our intent</h2>
<ul class="intent-list mt-5">
<li><h5 class="lg:text-3xl text-xl">Simplifying eLearning</h5></li>
<li><h5 class="lg:text-3xl text-xl">Empowering teaching</h5></li>
<li><h5 class="lg:text-3xl text-xl">Bringing knowledge to life</h5></li>
</ul>
</div>
</div>
<div class="bg-soft-text text-white p-12 ">
<div>
<h2 class="lg:text-8xl text-4xl font-argent">Our name</h2>
<h5 class="text-3xl my-5">According to Urban Dictionary, 'Omnicourse' is</h5>
<ul class="list-decimal ml-8">
<li class="lg:text-2xl text-xl font-light"><h5>A powerfully connecting experience.</h5></li>
<li class="lg:text-2xl text-xl font-light"><h5>To experience someone in a complete and utterly all encompassing fashion.</h5></li>
<li class="lg:text-2xl text-xl font-light"><h5>To reciprocally share ones physicality, feelings, thoughts, memories & more.</h5></li>
</ul>
<h5 class="lg:text-3xl text-xl my-5">That about sums us up.</h5>
</div>
</div>
<div class="bg-pippin p-12 rounded-b-2xl">
<h2 class="lg:text-8xl text-4xl font-argent mb-8">Create. Share. Learn.</h2>
<div class="grid grid-rows-1 lg:grid-cols-2 grid-cols-1 lg:gap-9 gap-4 text-xl leading-7">
<div>
<p class="mb-7">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 class="mb-7">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 class="mb-7">With Omnicourse, you can turn your spare listening time into productive learning time.</p>
<p class="mb-7">We provide a solution to the knowledge gap; you learn at your own pace. </p>
</div>
<div>
<p class="mb-7">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 class="mb-7">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 class="container mx-auto px-4 xl:px-0">
<header class="flex justify-between items-center py-6">
<a href="/">
<img src="{{ asset('assets/images/logo.svg')}}" alt="omnicourse ― Grow your skills with audio courses">
</a>
<nav class="lg:flex hidden">
<ul class="flex">
<li><a href="/about" class="mx-3 text-gray-500">About</a></li>
<li><a href="/faq" class="mx-3 text-gray-500">FAQ</a></li>
<li><a href="/creators" class="mx-2 text-almost-black font-semibold">Become a Creator</a></li>
<li><a href="https://creator.omnicourse.io/" target="_blank" class="mx-2 text-almost-black font-semibold">Creator Center</a></li>
</ul>
</nav>
<button class="flex lg:hidden mobile-nav-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" 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 class="mb-4 bg-lust border border-lust-400 text-white px-4 py-3 rounded relative" role="alert"><img src="'.asset("assets/images/warning_error.png").'" width="40" height="40"><br><strong class="font-bold">:message</strong></div>')) !!}
@endif
@yield('content')
<footer class="border-t border-soft-text mt-16 py-16 grid grid-rows-1 lg:grid-cols-4 grid-cols-1">
<div class="mb-2 md:mb-0">
<h6 class="font-semibold mb-2 md:mb-5">omnicourse</h6>
<div class="flex flex-col">
<a href="/about" class="text-sm mb-3 hover:text-lust">About omnicourse</a>
<a href="https://creator.omnicourse.io/" target="_blank" class="text-sm mb-3 hover:text-lust">Creator Center </a>
<a href="/identity" class="text-sm mb-3 hover:text-lust">Company Culture</a>
<a href="/creators" class="text-sm mb-3 hover:text-lust">Become a Creator</a>
<a href="/faq" class="text-sm mb-3 hover:text-lust">Frequently Asked Questions</a>
<a href="/privacy-policy" class="text-sm mb-3 hover:text-lust">Privacy Policy</a>
<a href="/terms-of-use" class="text-sm mb-3 hover:text-lust">Terms and Conditions</a>
</div>
</div>
<div class="mb-2 md:mb-0">
<h6 class="font-semibold mb-2 md:mb-5">Social</h6>
<div class="flex flex-col">
<a href="https://www.linkedin.com/company/omnicourse/" target="_blank" class="text-sm mb-3 hover:text-lust">Linkedin</a>
<a href="https://medium.com/@omnicourse" target="_blank" class="text-sm mb-3 hover:text-lust">Medium</a>
<a href="https://www.instagram.com/omnicourse/" target="_blank" class="text-sm mb-3 hover:text-lust">Instagram</a>
<a href="https://twitter.com/omnicourse/" target="_blank" class="text-sm mb-3 hover:text-lust">Twitter</a>
</div>
</div>
<div class="mb-4 md:mb-0">
<h6 class="font-semibold mb-2 md:mb-5">Contact</h6>
<a href="mailto:[email protected]" class="text-sm mb-3 hover:text-lust">[email protected]</a>
</div>
<div class="mb-2 md:mb-0">
<a href="https://omnicourse.io" class="mb-4 inline-block"><img src="{{ asset('assets/images/logo.svg') }}" style="height:25px" alt=""></a>
<p class="text-sm mb-3">Copyright © 2022 Omnicourse, Inc.</p>
</div>
</footer>
</div>
<div class="fixed inset-0 overflow-hidden mobile-nav" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
<div class="absolute inset-0 overflow-hidden mobile-nav__container">
<div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity " aria-hidden="true"></div>
<div class="fixed inset-y-0 right-0 pl-10 max-w-full flex ">
<div class="relative w-screen max-w-md">
<div class="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
<button type="button" class="mobile-nav__close rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" 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 class="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
<div class="px-4 sm:px-6 border-b border-gray-300 pb-2">
<h2 class="text-lg font-medium text-gray-900" id="slide-over-title">
Menu
</h2>
</div>
<div class="mt-6 relative flex-1 px-4 sm:px-6">
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full" aria-hidden="true">
<ul>
<li class="my-4"><a href="/creators" class="text-base text-almost-black font-medium">Become a Creator</a> </li>
<li class="my-4"><a href="/content-upload" class="text-base text-almost-black font-medium">Upload Content</a> </li>
<li class="my-4"><a href="/about" class="text-base text-gray-500 font-medium">About omnicourse</a> </li>
<li class="my-4"><a href="/faq" class="text-base text-gray-500 font-medium">Frequently Asked Questions</a> </li>
<li class="my-4"><a href="https://www.linkedin.com/company/omnicourse/" class="text-base text-gray-500 font-medium">LinkedIn</a> </li>
<li class="my-4"><a href="https://medium.com/@omnicourse" class="text-base text-gray-500 font-medium">Medium</a> </li>
<li class="my-4"><a href="https://www.innstagram.com/omnicourse" class="text-base text-gray-500 font-medium">Instagram</a> </li>
<li class="my-4"><a href="https://www.twitter.com/omnicourse" class="text-base text-gray-500 font-medium">Twitter</a> </li>
<li class="my-4"><a href="/privacy-policy" class="text-base text-gray-500 font-medium">Privacy Policy</a> </li>
<li class="my-4"><a href="/terms-of-use" class="text-base text-gray-500 font-medium">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>