og:image 不适用于 React Web Portfolio

Question

各位程序员朋友们大家好，我一直在努力解决这个问题。

我将在下面列出 link，让我知道为什么我不能将“Spraggins Designs”cover.png 文件作为 og:image，所以每个 link 一片模糊。

是太大还是太小还是错误？我使用了 Facebook Developers Debugger 工具，它总是说这是问题所在。

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>

它的 link 图片：

Answer 1

我刚刚修好了。我打开 Adobe PhotoShop 并将图像大小更改为 1200 像素 x 627 像素。

然后我将该 .png 文件添加到我的 GitHub 存储库中的 public 文件夹中，并通过头文件 link 对其进行了编辑，现在它似乎可以正常工作了，所以我将在此处包括我的 link 并查看它是否生成一个或 Whosebug 不这样做。

感谢将要回答此问题的人，因为你们总是这样做。

Link to Site For og:image

og:image 不适用于 React Web Portfolio

og:image not working for React Web Portfolio

html

reactjs

seo

head