#html #reactjs #seo #head
Вопрос:
Здравствуйте, коллеги-программисты и друзья, так что я ломал голову над этим.
Я перечислю ссылки ниже и дам мне знать, почему я не могу поместить файл cover.png «Проекты Спраггинса» в качестве изображения og:, поэтому каждая ссылка представляет собой размытый беспорядок.
Он слишком большой, или маленький, или неправильный? Я использовал инструмент отладчика разработчиков Facebook, и он всегда говорит, что в этом проблема.
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 amp;amp; 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> Изображение ссылки на него:
Ответ №1:
Я только что все исправил. Я открыл Adobe PhotoShop и изменил размер изображения на 1200 пикселей х 627 пикселей.
Затем я добавил этот файл .png в свою общую папку в репозитории GitHub и связал его с помощью файла заголовка, и, похоже, сейчас он работает, поэтому я включу свою ссылку здесь и посмотрю, генерирует ли он ее или StackOverflow этого не делает.
Спасибо тому, кто собирался ответить на него, так как вы, ребята, всегда это делаете.