htmlreactjsseohead
og:image not working for React Web Portfolio
Hello fellow programmers and friends, so I have been banging my head on this one.
I will list the links below, and let me know why I cannot put a "Spraggins Designs" cover.png file as the og:image, so every link is a blurry mess.
Is it too big or small or wrong? I used Facebook Developers Debugger tool and it always says that is the issue.
https://www.spragginsdesigns.com
https://github.com/spragginsdesigns/reactportfolio
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/public/apple-icon-180x180.png"
/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta
name="apple-mobile-web-app-title"
content="Austin Spraggins Professional Web Developer"
/>
<meta
name="application-name"
content="Austin Spraggins Professional Web Developer"
/>
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io"
/>
<meta name=" author" content="Austin Spraggins, Spraggins Designs" />
<meta
name="keywords"
content="HTML, CSS, Javascript, ReactJS, NodeJS, SEO, Coding, Portfolio, Resume, Website, Profile, Github, Linkedin, Design, Interactive, CV, Skills"
/>
<meta name="robots" content="index, follow" />
<meta name="og:title" content="Austin Spraggins Portfolio" />
<meta
name="og:type"
content="Resume and Portfolio Website and Web Application for Austin Spraggins"
/>
<meta name="og:locale" content="en_IN" />
<meta property="og:image" content="cover.png" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./Bootstrap5.css" />
<script
src="https://kit.fontawesome.com/9b271ff51f.js"
crossorigin="anonymous"
></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load our React component. -->
<!-- <script src="like_button.js"></script> -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V8FGRZVC8K"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'redacted');
</script>
<title>Spraggins Designs</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
const darkPref = window.matchMedia("(prefers-color-scheme: dark)");
if (darkPref.matches && localStorage.getItem("mode") !== "Light")
localStorage.setItem("mode", "Dark");
</script>
<script>
const fun = () => {
if (localStorage.getItem("mode") === "Dark") {
document.getElementById("mode-switch").checked = true;
document.documentElement.classList.toggle("dark-mode");
document.getElementById("not-dark").classList.toggle("inverse-dark");
document.getElementById("not-dark2").classList.toggle("inverse-dark");
var x = document.getElementsByClassName("img-pro");
for (let i = 0; i < x.length; i += 1) {
x.item(i).classList.toggle("inverse-dark");
}
}
};
fun();
</script>
</html>Image of a link of it:
Solution
I just fixed it. I opened Adobe PhotoShop and changed the Image Size to 1200 pixels x 627 pixels.
I then added that .png file to my public folder in my GitHub Repository and linked it through the header file, and it seems to be working now, so I will include my link here and see if it generates one or StackOverflow does not do that.
Thank you to whoever was going to answer it since you guys always do.