During this three-day weekend, I implemented multilingual support for this website CodeNote.net, which I had wanted to work on for a while. In preparation for AI-era SEO including AIO, AEO, GEO, LEO, I started with English support as the first phase.
This article summarizes the specific work I carried out, also serving as a record for future reference.
The work I implemented can be broadly divided into the following categories:
/) to a language selection pagehreflang attributes for SEOLet’s look at each of these in detail.
The first thing I worked on was redesigning the URL structure of the entire site.
There are several patterns for URL design for multilingual sites, but this time I adopted the format recommended by Google, which separates subdirectories for each language (example.com/ja/, example.com/en/).
The specific work was as follows:
/) to under the /ja/ directory/en/ directoryThis resulted in a clear path separation for each language, making it easier to manage and more understandable for users.
Along with the URL structure changes, I also reconsidered the role of the top page (/) which serves as the site’s entrance.
This was made into a neutral page that doesn’t belong to any specific language, serving as a hub page for users to select their language.
This was inspired by Wikipedia’s top page. It’s very simple, but as the first place users visit, I was conscious of creating a navigation flow that allows them to proceed to their target language site without confusion.
To allow users browsing the site to seamlessly switch languages at any time, I installed language switching links in the footer.
These links are implemented to go to the corresponding page in another language if it exists, or to each language’s top page (/ja/ or /en/) if it doesn’t exist. This makes it possible to switch languages without compromising the user experience.
hreflang Attributes for SEOOne of the most important elements in SEO for multilingual sites is setting up hreflang attributes.
This is an HTML tag that tells search engines “This page has alternative pages corresponding to these languages.”
By correctly setting up hreflang, appropriate pages that match the search user’s language or region are more likely to be displayed in search results.
This time, I placed <link> tags like the following in each page’s <head> tag.
<!-- Example: For /ja/about page -->
<head>
...
<!-- Indicates that this page is in Japanese -->
<link rel="alternate" hreflang="ja" href="https://codenote.net/ja/about" />
<!-- Indicates that a corresponding English page exists -->
<link rel="alternate" hreflang="en" href="https://codenote.net/en/about" />
<!-- Specifies default page for users whose language cannot be determined -->
<link rel="alternate" hreflang="x-default" href="https://codenote.net/ja/about" />
...
</head>The key point is to mutually set up hreflang for English pages on Japanese pages and for Japanese pages on English pages. Also, for users who don’t correspond to either language, I specified a default page (Japanese page in this case) with x-default.
Of course, for pages that exist in only one language, I implemented dynamic control to output only the hreflang for the existing language.
With this implementation, I was able to take a step toward internationalizing CodeNote.net. Multilingual support involves many considerations including URL design, UX, and SEO, which can be challenging, but I once again felt it’s a very important initiative that expands the site’s possibilities.
Going forward, I plan to expand English content while also considering support for other languages in the future.
I hope this article will be helpful for those who are about to implement multilingual support for their websites.
That’s all from the Gemba.