Open graph meta tags

1

Hello, My meta tags I created work for Facebook, Twitter, and LinkedIn, but they do not work in Slack… I have googled for a few days now, but not sure why my OPG Image tag does not preview in Slack…

Does anyone know why it would work in as a preview to all other sites but not in Slack?

My code:

<head>
  <!--open graph meta tags for social sites and search engines-->
  <meta property="og:url" content="https://freecodecampsf.github.io/FCCSF/index.html" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Free Code Camp SF" />
  <meta property="og:description" content="Join our community of over 4.5k on Facebook and follow us on Instagram.  All of our meetups are currently online so we welcome coders from anywhere to join us." />
  <meta property="og:site_name" content="Free Code Camp SF" />
  <meta property="og:image" content="https://github.com/ainneo/FCCSF/blob/master/img/og-image.png?raw=true" />
  <meta property="og:image:width" content="800" />
  <meta property="og:image:height" content="600" />
  <meta name="twitter:url" content="https://freecodecampsf.github.io/FCCSF/index.html" />
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:type" content="website" />
  <meta name="twitter:title" content="Free Code Camp SF" />
  <meta name="twitter:description" content="Join our community of over 4.5k on Facebook and follow us on Instagram.  All of our meetups are currently online so we welcome coders from anywhere to join us." />
  <meta name="twitter:site_name" content="Free Code Camp SF" />
  <meta name="twitter:image" content="https://github.com/ainneo/FCCSF/blob/master/img/og-image.png?raw=true" />
  <!-- Required meta tags for Booststrap -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Free Code Camp San Francisco</title>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/9983973718.js" crossorigin="anonymous" SameSite="none Secure"></script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <!-- CSS StyleSheet -->
  <link rel="stylesheet" href="./style.css" />
</head>

my site: https://ainneo.github.io/FCCSF/

2

Hi @ainneo. Someone faced a similar issue in the link below.


You can read through the comments. Probably you are facing same/similar problem. I would also suggest trying the following if the above doesn’t fix the issue,
  1. Loading image with varying sizes to see if the image size is a factor.
  2. Hosting the image elsewhere instead of Github.
  3. Asking for help from one of the communities mentioned in the Open Graph Protocol website. They might have a fix or workaround.

Happy Coding.

1 Like