Ad

Og:image Not Working For React Web Portfolio

- 1 answer

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"
      target="_blank" rel="nofollow noreferrer" href="/public/apple-icon-180x180.png"
    />
    <link rel="icon" type="image/png" sizes="32x32" target="_blank" rel="nofollow noreferrer" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" target="_blank" rel="nofollow noreferrer" href="/favicon-16x16.png" />
    <link rel="manifest" target="_blank" rel="nofollow noreferrer" href="/site.webmanifest" />
    <link rel="mask-icon" target="_blank" rel="nofollow noreferrer" 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"
      target="_blank" rel="nofollow noreferrer" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
      integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" 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/[email protected]/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/[email protected]/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: Blurry of:image when linked

Ad

Answer

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.

Link to Site For og:image

Ad
source: stackoverflow.com
Ad