What proportion of a page should minimally be in a given language to warrant the use of lang and hreflang tags?

Question

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 www.example.com/en/title-of-user-content/

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 lang and hreflang tags should i use in such a case? nl or en? Or should i use x-default instead?

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 nl using javascript without confusing the search engines. The dutch content would probably make up the largest verbal portion of the page compared to the sum of the english words around it. But i don't know how much should be in dutch to warrant the addition of hreflang tags. So thats why i'm asking.

Answer 1

From what you are saying it seems like everything is in the other language (Dutch) with the exception of navigation (which if possible I would recommend translating not only for SEO but also user experience).

If that is the case it will confuse search engines less if you did add the proper hreflang tags for that language as well. It is simply a signal that is telling Google which page to show if someone happens to search in that language.

By the way, you should be adding hreflang tags for all languages available for that page.