search

angeloocana / gatsby-plugin-i18n

Multi language routes for Gatsby
434 stars 77 forks source link

does this plugin handles hreflang support? #43

Open zebnat opened 6 years ago

zebnat commented 6 years ago

Sometimes the slug url changes for the same page but different language: For example: /es/acerca-de-mi/ /en/about-me/ or /es/blog/implementar-internacionalizacion-con-gatsby/ < same content but different language /en/blog/i18-implementation-with-gatsby/ < same content but different language

how about a way to link to the different lang page but with different slugs and also print the hreflang stuff for google and other search engines?

ChrisBoon commented 6 years ago

To update the lang attribute I would recommend you use React Helmet: React Helmet Something like this in your index.js page (or a nested component):

<Helmet>
    <html lang={langKey} />
</Helmet>

where langKey is the value provided by gatsby-plugin-i18n.

zebnat commented 6 years ago

I meant this

hreflang google localization

looks like there is no support for this, i will pre-build a sitemap with this information, seems like the better option with gatsby.

ChrisBoon commented 6 years ago

My bad, wasn't paying enough attention. For many people react-helmet is still the way to go. It can generate link tags in the head. In fact they have an hreflang example on their github readme - inside the <Helmet> tags you'd do something like this:

{locales.map((locale) => {
  <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} />
})}

where locales is an array of all the languages your site is available in.

However for your case this is tricky as you aren't just changing the langkey but also the url. eg if you were doing: /es/acerca-de-mi/ /en/acerca-de-mi/

it would be easy, but because you want to do: /es/acerca-de-mi/ /en/about-me/

It's not clear how you would link the two files as being the same content to Gatsby. I guess that's what you're asking of this plugin? Presumably you want to add some metadata to your MD files that gives an asset ID to say that files with different filenames are still the same content, then gatsby-plugin-i18n should read that when generating the html and either pass you the data to handle as you please, or automatically add the link tags?

zebnat commented 6 years ago

presumably you want to add some metadata to your MD files that gives an asset ID to say that files with different filenames are still the same content, then gatsby-plugin-i18n should read that when generating the html and either pass you the data to handle as you please, or automatically add the link tags?

Yep i need something like this, changing url slug for SEO purposes is the recommended aproach, i've built dynamic multilingual websites with raw php and my custom mvc framework but when using gatsby + a plugin for internationalization i expected to have those features available

Right now the best choice to me since i don't have enough experience with gatsby and plugins is just build a sitemap with the multilingual metadata information for google, but when the user changes the lang on the website i will send him to the home page instead of the "same page id" since its easier to link.

ChrisBoon commented 6 years ago

Hmmm, yeah. It does sound like a good use-case for a plugin. Not sure whether @angeloocana would want to add it to this plugin or if he's trying to keep this one lean, but to me it seems a good place to do it.

For you right now, if you're happy doing as a sitemap then that's cool. If you'd prefer to have the links and your site isn't frequently updated you could just manually create a json file with the pairings, import it to gatsby-config.js, and export it as a siteMetadata value. You could then use it in your gatsby code with React Helmet to generate the link elements.