Multilingual Ghost CMS Blog: 7. Adding hreflang
The English home is served at / , and the Korean home at /ko/ , but search engines had no information indicating that the two pages were versions in different languages. Providing users with a Language selector and explaining multilingual relationships to search engines are separate issues. For search engines, you need to use hreflang to indicate the relationship between each language URL. In…
Multilingual Ghost CMS blog: Adding hreflang links
The English and Korean versions of this blog have different URLs: https://sanghunkang.com/ for English and https://sanghunkang.com/ko/ for Korean. However, search engines had no way of knowing that these pages were language-specific. The solution is to use the hreflang attribute to indicate the relationship between each language URL.
In the 0.0.7 release, hreflang was added to the English and Korean home pages. The home page URLs are:
- English: https://sanghunkang.com/
- Korean: https://sanghunkang.com/ko/
To add the hreflang attribute to both pages, I included three links in the <head> section of each page:
```html
<link rel="alternate" hreflang="en" href="https://sanghunkang.com/">
<link rel="alternate" hreflang="ko" href="https://sanghunkang.com/ko/">
<link rel="alternate" hreflang="x-default" href="https://sanghunkang.com/">
```
The "x-default" language indicates the default page to use when the user's language is not clearly matched.
At first, I attempted to check if the current page was the home page using the `{{#is home}}` condition in default.hbs, but Ghost treats `/ko/` as the site home because it's the first page of a Collection created with routes.yaml. This caused the hreflang attribute to only appear on the English home page.
To fix this issue, I modified index-en.hbs and index-ko.hbs to output the hreflang block from the respective language home pages. Both templates now pass the same set of URLs, ensuring that the hreflang attribute appears on both the English and Korean home pages.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
