krisstern
commented
12 months ago It looks like for that page and similar pages in blog in paricular we need to have some required og: tags:
https://www.linkedin.com/help/linkedin/answer/a521928
Appears that we do have og: tags the following in the HTML file generated for the page concerned in the "Open Graph data" section:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>
The Jenkins Blog
</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
<meta content='Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software' name='description'>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<meta content='ie=edge' http-equiv='x-ua-compatible'>
<link href='https://www.jenkins.io/blog/authors/wadeck/' rel='canonical'>
<!-- Favicons -->
<link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'>
<link href='/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180'>
<link href='/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'>
<link href='/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'>
<link href='/site.webmanifest' rel='manifest'>
<link color='#5bbad5' href='/safari-pinned-tab.svg' rel='mask-icon'>
<meta content='#2b5797' name='msapplication-TileColor'>
<meta content='#ffffff' name='theme-color'>
<meta content='The Jenkins Blog' name='apple-mobile-web-app-title'>
<!-- Twitter Card data -->
<meta content='summary_large_image' name='twitter:card'>
<meta content='@JenkinsCI' name='twitter:site'>
<meta content='The Jenkins Blog' name='twitter:title'>
<meta content='Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software' name='twitter:description'>
<meta content='@JenkinsCI' name='twitter:creator'>
<!-- Twitter Summary card images must be at least 120x120px -->
<meta content='/images/logo-title-opengraph.png' name='twitter:image'>
<!-- Open Graph data -->
<meta content='The Jenkins Blog' property='og:title'>
<meta content='article' property='og:type'>
<meta content='https://www.jenkins.io/blog/authors/wadeck/' property='og:url'>
<meta content='Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software' name='og:description'>
<meta content='The Jenkins Blog' property='og:site_name'>
<meta content='/images/logo-title-opengraph.png' name='og:image'>
<link href='/assets/bower/bootstrap/css/bootstrap.min.css' media='screen' rel='stylesheet'>
<link href='/css/jenkins.css' media='screen' rel='stylesheet'>
<link href='/css/copy-to-clipboard.css' media='screen' rel='stylesheet'>
<link href='/stylesheets/styles.css' media='screen' rel='stylesheet'>
<!-- Non-obtrusive CSS styles -->
<link href='/css/footer.css' media='screen' rel='stylesheet'>
<link href='/css/font-awesome.min.css' media='screen' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/@docsearch/css@3' rel='stylesheet'>
</head>
<body>
<script src='/assets/bower/jquery/jquery.min.js'></script>
<script src='/js/copy-to-clipboard.js'></script>
<jio-navbar class='fixed-nav' id='ji-toolbar' property='https://www.jenkins.io' showSearchBox=''></jio-navbar>
<div class='app-blog-page'>
<div class='app-author' id='about-the-author'>
<div class='app-avatar app-avatar-image'>
<img alt='Wadeck Follonier' class='app-avatar__image' loading='lazy' onload='this.style.opacity = 1' src='/images/avatars/wadeck.jpg'>
</div>
<div class='app-author__content'>
<p class='app-author__name'>Wadeck Follonier</p>
<div class="paragraph">
<p>Wadeck is the Jenkins security officer, leading the <a href="/security/#team">security team</a> in improving Jenkins security.
He likes to provide solutions that are both useful and easy to use.</p>
</div>
<ul class='app-social-media-buttons'>
<li>
<a href='https://github.com/wadeck' rel='noreferrer noopener' target='_blank'>
GitHub
</a>
</li>
</ul>
</div>
</div>
<ul class='app-cards'>
<li class='app-card'>
<a href='/blog/2023/10/12/jenkins-september-newsletter/'>
<div class='app-card__preview'>
<img alt='Jenkins September 2023 Newsletter' loading='lazy' onload='this.style.opacity = 1' src='/images/post-images/2023/02/07/2023-02-07-jenkins-newsletter/centered-newsletter.png'>
</div>
<h5 class='app-card__title'>
Jenkins September 2023 Newsletter
</h5>
...So there is a typo in the line for <meta content='/images/logo-title-opengraph.png' name='og:image'>, where the name should really be the property.
Let me open a PR to see if this can be fixed.
Problem with this page
https://www.jenkins.io/blog/2023/10/12/jenkins-september-newsletter
Expected behavior
There is an issue with open graph image generation. Take, for example, this blog post: https://www.jenkins.io/blog/2023/10/12/jenkins-september-newsletter. When I visited https://metatags.io and checked the open graph image, I found that it is as expected.
Actual behavior
When I checked the open graph image using the linkedin post inspector for the above blog, I received an image of the person who wrote the blog, which is not what I expected.
Possible solution
Can we check the code where we are adding tags and images for Open Graph? There might be an issue with the Open Graph meta tags. The metadata that we gathered from the above blog using the linkedin post inspector is displayed below: