I am building an angular social media website that is intended to be used internationally. People will be able to post multiple translations of the same page if they choose to. Next to this people who are browsing the website can select a preferred language. Once they've selected this and their browsing a user post the server will always try to fetch the translation that matches their language preference.
Selecting a language preference will also change the language code part of the url. For instance, lets say someone starts out with the english version of the website then the url would be something like
If the user changes the language to dutch the url will immediately change into
www.example.com/nl/title-of-user-content/. From that point on the server will try to serve a dutch version of the page
title-of-user-content. If it doesn't find it it will either try to serve the english one or the first one that is available.
Lets say that the dutch version is available for
title-of-user-content. This page is a
child component that is displayed within the
root component called
app. Its like a window that is displayed in the middle of the website and its content is dutch. Now lets assume that a dutch translation for the elements in the
root component is yet present. And by elements i mean things like options or menu's in the header part of the website. These would all still be shown in english in that case.
So now i have a page that has a window with dutch content in the middle but english content around the sides of it. Now my question is; what
hreflang tags should i use in such a case?
en? Or should i use
I can imagine that i can safely add the attribute
lang='nl' to the element that represents the window. But i don't know if i can also safely add
hreflang tags for