CODEWITHSUNDEEP
javascripthtmlreactjsseohreflang
saar twito
saar twito

Reputation: 9

In React app that support multilingual, how to use the hreflang tag correctly?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Do I need to paste the following code In the public\index.html <head></head> part like this?

<link rel="alternate" hreflang="en" href="https://url_of_page/"/>
<link rel="alternate" hreflang="es" href="https://url_of_page/es"/>

<link rel="alternate" hreflang="en" href="https://url_of_page/landing-webpage"/>
<link rel="alternate" hreflang="es" href="https://url_of_page/es/landing-webpage"/>

<link rel="alternate" hreflang="en" href="https://url_of_page/business-website"/>
<link rel="alternate" hreflang="es" href="https://url_of_page/es/business-website"/>

I was looking at Google Search Console, and other SEO websites the past week and could not find the answer to that. Thank you so much, StackOverflow!

Upvotes: 0

Views: 759

Answers (1)

Dima
Dima

Reputation: 11

Had the same problem and that wouldn't be correctly if you put all alternate versions of pages in index.html. You need to rewrite your project to support server side rendering to get fully html page for working SEO. For example, you can use Next.js. Hope it helps!

Upvotes: 0

Related Questions