2025 Blaugust 03 - Break stuff

Published - (03 Aug 2025)

Well yesterdays reboot when well-ish. Apart from having to jump on Mastodon to delete the flood of posts from echofeed because the perma links in the RSS all updated, one missing page, and I'd broken the music embed at the bottom of the page. Everything seems to be no more broken than I thought it would be. Now I can start adding things.

Site updates

Added OpenGraph tags to page generation.
Fixed the site links to the updated month(2025/2/... > 2025/02/...), the pages are still there so no 404s but I'm not using the old links in the site.
Fixed the end of page YouTube music video.
Tip:- The embed uses a special URL you can't use the normal one from the browser URL.

Today's post is going to be more sausage making than personal, sorry in advance.

OpenGraph

It's a nice to have because when you share a link with other sites it is the metadata that is used to make your link look good.

It is a few extra tags in the <HEAD> block, and like all web standards the documentation for it is both thin on the ground and clear as mud.

Core Required Properties

og:title - The title of your content (e.g., "2025 Blaugust 02 - Brand new start")
This can have the site name but it's not needed
og:type - The type of content (common types: website, article, profile)
og:image - Full URL to an image representing the content (the bigger the better)
I made the mistake of thinking a relative URL would do, but no
og:url - Canonical URL of the content (should be permanent/link-friendly)

Basic Optional Properties

og:description - Single sentence description of the content
og:site_name - The name of your overall website (e.g., "Dave Henry Blog")
og:locale - Language/locale (default: en_GB, can specify alternatives like es_ES)

Content-Type Specific Properties

For Articles/Posts/Pages (`og:type = "article"`)

article:published_time - ISO 8601 publish date
article:modified_time - ISO 8601 last modified date
article:expiration_time - ISO 8601 expiration date
article:author - Profile URLs of authors
article:section - High-level section name (e.g., "Blog")
article:tag - Array of tag keywords, one meta per tag

ISO 8601 date

In cSharp the Date format string for this is:-

DateTime utcNow = DateTime.UtcNow;
string iso8601String = utcNow.ToString("yyyy-MM-ddTHH:mmZ");

But for the most precise ISO 8601 format (including fractional seconds when needed), you can use:-

string iso8601String = utcNow.ToString("o"); // e.g., "2025-08-03T14:30:00.0000000Z"

Profile Information (`og:type = "profile"`)

profile:first_name - Person's first name
profile:last_name - Person's last name
profile:username - Person's username
profile:gender - Gender (male/female)

Advanced Image Properties

og:image:url - Alternative to og:image
og:image:secure_url - HTTPS image URL
og:image:type - MIME type (e.g., "image/jpeg")
og:image:width / og:image:height - Dimensions in pixels
og:image:alt - Description of image for accessibility

Extended Metadata

Business/Place Information

business:contact_data:street_address
business:contact_data:locality (City)
business:contact_data:region (State/Province)
business:contact_data:postal_code
business:contact_data:country_name
place:location:latitude / place:location:longitude

I'm not going to include the farcbook & xitter specific extensions because funk those guys.

Mastodon Author attribution

fediverse:creator - Your Mastodon account address.

Example of Comprehensive Implementation

<head>
  <!-- Basic Metadata -->
  <meta property="og:title" content="2025 Blaugust 02 - Brand new start" />
  <meta property="og:type" content="article" />
  <meta property="og:image" content="https://davehenry.blog/images/covers/Blaugust2025.webp" />
  <meta property="og:url" content="https://davehenry.blog/2025/08/2025-blaugust-02-brand-new-start/" />
  <meta property="og:description" content="If you're on the site this is the new build, using the myPOSSE-builder." />
  <meta property="og:site_name" content="Dave Henry Blog" />
  <meta property="og:locale" content="en_GB" />
  
  <!-- Article Metadata -->
  <meta property="article:published_time" content="2025-08-02T00:00:00Z" />
  <meta property="article:author" content="https://davehenry.blog/about/" />
  <meta property="article:section" content="Blog" />
  <meta property="article:tag" content="blaugust" />
  <meta property="article:tag" content="blaugust2025" />
  
  <!-- Image Metadata -->
  <meta property="og:image:width" content="320" />
  <meta property="og:image:height" content="129" />
  <meta property="og:image:alt" content=" 2025 Blaugust Festival of Blogging" />
  
  <!-- Mastodon Author attribution -->  
  <meta name="fediverse:creator" content="@mort8088@toot.wales">
  
</head>

Best Practices

Always include the 4 required properties (title, type, image, URL)
Use high-quality images (minimum 1200×630 pixels, ideal aspect ratio 1.91:1)
Keep titles under 60 characters
Keep descriptions under 155 characters
Use HTTPS URLs for all resources
Validate your markup using Open Graph Tester

We're told that

The richness of your OpenGraph metadata directly impacts how platforms display your content and can significantly affect click-through rates from social shares.

I just think it makes for nicer sharing.

Making the web better one link at a time, Stay lucky. 🔗

Warning : contains rude words.