Added hostname to og:url to include top level domain

[nick-mon1]

Summary

Adds top level host name to og:url meta tags. Closes #7168.

Preview

Link to Preview

Solution

When viewing the og:url value on the live site, only the file pathname (/communities/) is displayed instead of https://www.digital.gov/communities/.

By setting a hostName params in the config.yml we can set the base host name.

Note

og:url path will be different for each environment

production
{{ .Permalink }} will only return the file path and not the host name:
https://digital.gov/resources/an-introduction-to-domain-management

cloud pages preview
{{ .Permalink }} returns the preview path and branch name with the file path:
https://digital.gov/preview/gsa/digitalgov.gov/nl-fix-og-url/resources/an-introduction-to-domain-management

localhost
{{ .Permalink }} will return localhost:1313 with the file path:
https://digital.gov/localhost:1313/resources/an-introduction-to-domain-management

How To Test

1. Visit any page
2. Open developer tools and search for og:url
3. Should see https://digital.gov/preview/gsa/digitalgov.gov/nl-fix-og-url/resources/an-introduction-to-domain-management
4. In production this will resolve to https://digital.gov/resources/an-introduction-to-domain-management

---

Dev Checklist

• PR has correct labels
• A11y testing (voice over testing, meets WCAG, run axe tools)
• Code is formatted properly

[github-actions]

🔍 Preview in Federalist

[RileySeaburg]

LGTM

[mejiaj]

@nick-mon1 I tested locally and in preview. Inner pages don't seem to generate the correct link.

I noticed the baseURL is / in

digitalgov.gov/config.yml

Line 2 in 0fd0019

baseURL: "/"

Changing it to https://digital.gov/ makes permalinks work as expected and follows the guidance here - Configure Hugo | Hugo.

We should investigate why we need the / and if this is a legacy config option. Alternatively, we could try a workaround like making the permalink absolute.

Example

<meta
    property="og:url"
+    content="{{- .Permalink | absURL -}}"
  />

[mejiaj]

Communities

Returns og:url value of https://digital.gov//localhost:1313/communities/.

In Cloud Pages preview I see a link that leads to 404:

https://federalist-466b7d92-5da1-4208-974f-d61fd4348571.sites.pages.cloud.gov/preview/gsa/digitalgov.gov/nl-fix-og-url/communities/

It should be:

https://federalist-466b7d92-5da1-4208-974f-d61fd4348571.sites.pages.cloud.gov/preview/gsa/digitalgov.gov/nl-fix-og-url/communities/

[nick-mon1]

@mejiaj Both of the URL's are the same in the examples above. For some reason I do not see https://www.digital.gov set on my local, still uses localhost:1313, could be a caching issue with your code suggestions.

1. Updated baseURL: https://www.digital.gov in config.yml
2. And set:

<meta property="og:url" content="{{- .Permalink | absURL -}}"/>

[RileySeaburg]

URL not displaying as expected.
Previous code change worked as expected.

[nick-mon1]

Explanation

1. Set the baseURL: "https://digital.gov" in the config.yml for local development. See comment in hugo support.
   1. When running hugo locally, the baseURL will be replaced with localhost:1313 for links to work
   2. When running in production, it will be replaced with https://digital.gov
   3. When baseURL: "/" or baseURL: "" (blank) it will not generate full paths in production which is what is happening currently
2. Follow the hugo convention of using {{ .Permalink | absURL }} for setting og:url path.
3. Optional: set hugo serve -b https://digital.gov for testing/production environment if above fix doesn't work, this is the recommended suggestion for dealing with env configuration

Next Steps

@RileySeaburg the current URL's we are seeing are due to cloud.pages configuration, but they should resolve when we merge to main. If not, we should do step 3 above in a follow up PR if this fix doesn't work.

[RileySeaburg]

I think we'll need to reconfigure cloud.gov because otherwise, I'm not sure why it would show the URL like that.
Local changes look great. Approving.

[mejiaj]

3. Optional: set hugo serve -b https://digital.gov for testing/production environment if above fix doesn't work, this is the recommended suggestion for dealing with env configuration

@nick-mon1 @RileySeaburg Cloud pages has some default environment variables. Could we use that to target the preview builds?

[RileySeaburg]

3. Optional: set hugo serve -b https://digital.gov for testing/production environment if above fix doesn't work, this is the recommended suggestion for dealing with env configuration

@nick-mon1 @RileySeaburg Cloud pages has some default environment variables. Could we use that to target the preview builds?

@mejiaj Yes, we can.

@nick-mon1 not sure if you want to just do that or create a task and make this dependent on that task.
It might be worth creating a new task to review the environment variables in cloud.gov and optimize them.

[mejiaj]

Looks good and I don't see the notice bar banner locally anymore.