When to use attribute rel="canonical", rel="alternate", and hreflang for the link tag

Question

I have this pages:

https://domain.tld/fr/post/mon-premier-article
https://domain.tld/fr/post/my-first-post
https://domain.tld/fr/post/mi-primera-publicacion

Same for site in English...

https://domain.tld/en/post/mon-premier-article
https://domain.tld/en/post/my-first-post
https://domain.tld/en/post/mi-primera-publicacion

... and in Spanish:

https://domain.tld/es/post/mon-premier-article
https://domain.tld/es/post/my-first-post
https://domain.tld/es/post/mi-primera-publicacion

With a 301 redirect from https://domain.tld/post/mon-premier-article to https://domain.tld/fr/post/mon-premier-article, depending on the user language (with fallback to en).

Only the blog post content change. Headers, footer, navigation... will be localized according to the user language.

So... here my <link> tags for the page /post/mon-premier-article:

<link hreflang="fr" rel="canonical" href="https://domain.tld/post/mon-premier-article">
<link hreflang="en" rel="alternate" href="https://domain.tld/post/my-first-post">
<link hreflang="es" rel="alternate" href="https://domain.tld/post/mi-premera-publicacion">

---

Not sure if I use it right. Must I include the /fr in the URL?

The three pages have a different content, they're just translations. So no duplicate content here, right? So Maybe the following is better?

<link hreflang="fr" rel="canonical" href="https://domain.tld/post/fr/mon-premier-article">
<link hreflang="en" rel="alternate" href="https://domain.tld/post/en/mon-premier-article">
<link hreflang="es" rel="alternate" href="https://domain.tld/post/es/mon-premier-article">

Answer 1

Here is a real-world example. In this case, EN (https://www.example.com) is the default language, and the other languages are alternates.

<link href="https://www.example.com" rel="home">
<link href="https://www.example.com/contact-us" rel="alternate" hreflang="x-default">
<link href="https://www.example.com/fr/contactez-nous" rel="alternate" hreflang="fr-fr">
<link href="https://www.example.com/de/kontakt-aufnehmen" rel="alternate" hreflang="de-de">
<link href="https://www.example.com/contact-us" rel="alternate" hreflang="en-us">