Meta link issue on translated website

support
1

Hey Hugo community! :wave: Got a small thing I’m hitting a wall on and hoping to get some pointers on an alternative approach.

I’m having an issue with <meta> tags that reference an images on my website. Since the website is translated, it’s redirecting to the appropriate language directory (/en, /es, /ar) and the {{.Permalink}} for the image also includes the language (/en/image.png) which causes the images to not link properly.

For example, image url is /en/home/social.en.png and page is https://sitename.netlify.app/en/, which outputs a bad URL (https://sitename.netlify.app/en//en/home/social.en.png).

I’ve tried fixing this via absolute URLs on the meta image, but it always ends up as a relative URL once the site is built to production environment (even though they were absolute in local environment). Is there a way to fix this or another approach I’ve not considered?

2

Your issue is difficult to understand without seeing template code, site configuration, etc.

4

Thanks for the response @jmooring :slight_smile:

The template code to render the URL of meta images is:

{{ $.Scratch.Set "img" (.Page.Resources.GetMatch `social.png`) }}
{{ $img := .Scratch.Get "img" }}
<meta itemprop="image" content="{{ with $img }}{{ .Permalink }}{{ end }}">

Site config

# General
title = "SIte Name"
baseURL = "https://site-name/"
languageCode = "en"
defaultContentLanguage = 'en'
enableRobotsTXT = true
disableAliases = true

# Mutli-lang Settings
[languages]
  [languages.en]
    languageName = "English"
    baseURL = "/en/"
    weight = 1

  [languages.ar]
    languageName = "عربي"
    baseURL = "/ar/"
    languagedirection = 'rtl'
    weight = 2

  [languages.es]
    languageName = "Español"
    baseURL = "/es/"
    weight = 3
5

Remove the baseURL setting from each of the language tables, but keep the setting in the root table (i.e., the one at the top of the file).

There may be other problems, but let’s start here.

6

That seemed to do the trick @jmooring! Thank you for the support. I assumed that the baseURL config was required for each language.

7

Update: while it appears that removing the baseURL setting from each language table fixed the <meta> image linking issue, it’s caused a new one:

Top level pages now redirect to Arabic translated versions of the page. :thinking:

8

Please share a link to the public repository for your project.

9

Thanks to @jmooring, a solution was found:

Turns out the top level pages were redirecting to the Arabic versions because of a ‘url’ property that was pointing to the Arabic translation for those pages in the front matter. The issue was resolved by removing those properties.

See URL Management | Hugo

This was a helpful way to find where the pages were getting clobbered:

hugo --printPathWarnings
10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.