So I want my website to have an opengraph preview. For that I coded a new system in my index.html file which goes like this:
$(document).ready(function(){
$("#navbar").load("navbar.html");
$("#header").load("header.html");
});
And then the navbar loads here in a div:
<div id="navbar"></div>
The navbar works fine, but the header is having some issues.
I put the header here before the <head> ends:
<div id="header"></div>
I tried doing this as the code for the header:
<!-- HTML Meta Tags -->
<title>M100</title>
<meta name="description" content="Thing">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://micamaster100.github.io/">
<meta property="og:type" content="website">
<meta property="og:title" content="M100">
<meta property="og:description" content="Thing">
<meta property="og:image" content="https://opengraph.b-cdn.net/production/images/6956cfb8-f271-4cc5-bea6-965c7ce33b70.png?token=UTylE3SBRlkQmuQGqlHtvBVjJSbd8Wh6iZV5TvXLWF0&height=675&width=1200&expires=33258560618">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="micamaster100.github.io">
<meta property="twitter:url" content="https://micamaster100.github.io/">
<meta name="twitter:title" content="M100">
<meta name="twitter:description" content="Thing">
<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/6956cfb8-f271-4cc5-bea6-965c7ce33b70.png?token=UTylE3SBRlkQmuQGqlHtvBVjJSbd8Wh6iZV5TvXLWF0&height=675&width=1200&expires=33258560618">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
And only get the title but not the social media preview.
edit: looking at the website now does have the social media preview, but I added the opengraph directly into the index.html. My goal here is to have that in a seperate script.
<div>elements cannot go inside<head>