Sure is getting dusty in this ten year old blog. I do like the clean, if a bit dated, format, what, with the Matrix references and all. I wanted to do a bit of a change.
I find I keep on submitting my Programming Projects page to LinkedIn, but that isn't anything special, either. All it says is the title: Programming Projects... so I started chatting with my co-worker, Claude AI.
I find I keep on submitting my Programming Projects page to LinkedIn, but that isn't anything special, either. All it says is the title: Programming Projects... so I started chatting with my co-worker, Claude AI.
Claude said:
"When you share a URL on LinkedIn, it uses Open Graph (OG) meta tags to generate the preview card (title, description, and image). Since your page just shows "Programming Projects" with no description or image, those tags are likely missing or incomplete.
"What to Add to Your Blogger Page
"In Blogger, go to your page's HTML editor and add these tags inside the <head> section. You can do this via Theme > Edit HTML, or for a specific page via the page editor's HTML view:
<meta property="og:title" content="Programming Projects – T.J. Maher" />
<meta property="og:description" content="A curated list of programming projects by T.J. Maher, Software Development Engineer in Test." />
<meta property="og:image" content="https://YOUR_IMAGE_URL_HERE.jpg" />
<meta property="og:url" content="https://www.tjmaher.com/p/programming-projects.html" />
<meta property="og:type" content="website" />
<!-- LinkedIn also reads Twitter Card tags as fallback -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Programming Projects – T.J. Maher" />
<meta name="twitter:description" content="A curated list of programming projects by T.J. Maher, Software Development Engineer in Test." />
<meta name="twitter:image" content="https://YOUR_IMAGE_URL_HERE.jpg" />og:imageis the most impactful tag — LinkedIn recommends 1200×627px (roughly 1.91:1 ratio). Upload an image to your Blogger media library or use any publicly accessible URL.og:descriptionshould be 1–2 sentences summarizing the page — this is what shows below the title in the LinkedIn preview.- After updating, use LinkedIn's Post Inspector to force LinkedIn to re-scrape the URL and preview how it will look.
"Blogger doesn't give you direct <head> access per individual page easily. The cleanest approach is to edit your Theme HTML and add a conditional block like:
<b:if cond='data:blog.url == "https://www.tjmaher.com/p/programming-projects.html"'>
<meta property="og:title" content="Programming Projects – T.J. Maher" />
<meta property="og:description" content="Your description here." />
<meta property="og:image" content="https://your-image-url.jpg" />
</b:if>"This way the tags only apply to that specific page without affecting the rest of your blog."
Then, Claude.ai came up with above graphic. How does it look?
-T.J. Maher
Software Engineer in Test
BlueSky | YouTube | LinkedIn | Articles
No comments:
Post a Comment