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>
2
Answers
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.
In your
app.blade.phpfile. 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.