Add Mosaic to Hugo sites
September 27, 2024
To generate OG images dynamically in your Hugo site using the image service, you can create a shortcode that will handle appending the current page URL to the base image service URL. Here’s a step-by-step guide to achieve this:
Step 1 - Find where your Meta tags are defined
- Search with the following keyword:
meta property
orog:image
. - And you will find the meta property tags with
og:image
defined. - Most of the time, these properties will be present in the
header.html
in the partials
Step 2 - Replace them with the following snippet
Replace the meta property tags of og:images with the following snippet.
{{- $baseURL := "https://mosaicimg.com/use?url=" -}} {{- $pageURL :=
.Page.Permalink -}} {{- $ogImageURL := printf "%s%s" $baseURL $pageURL -}}
<meta property="og:image" content="{{ $ogImageURL }}" />
This shortcode constructs the full URL for the OG image by combining the base URL with the current page’s permalink.
Step 3 - Test Your Site
-
Run your Hugo site locally to ensure everything is working correctly:
hugo server
-
Navigate to different pages and inspect the HTML to verify that the OG image meta tag is being generated correctly with the appropriate URLs.