Globalseo is a translation service that allows you to translate your website into multiple languages with low effort (powered by AI). This package provides a simple way to integrate Globalseo with your Next.js website.
npm i globalseo-next --save
For SEO purposes, it is recommended to use subdomains because our subdomain server will translate the page and return the html to the client. This way, the search engine will see the translated content without executing javascript.
Usage: put GlobalSeoScript component at the end of the body tag.
File to modify for page router: pages/_document.tsx
File to modify app router: app/layout.tsx
import {GlobalSeoScript} from "globalseo-next";
<body>
<GlobalSeoScript
translationMode="subdomain"
apiKey="YOUR_API_KEY"
originalLanguage="en"
allowedLanguages="en, es"
excludeClasses="class1, class2"
excludeIds="id1, id2"
customLinks={{
'https://www.example.com/file_en.pdf': {
de: 'https://www.example.com/file_de.pdf',
fr: 'https://www.example.com/file_fr.pdf',
es: 'https://www.example.com/file_es.pdf',
},
'https://www.example.com/file_en.doc': {
de: 'https://www.example.com/file_de.doc',
fr: 'https://www.example.com/file_fr.doc',
es: 'https://www.example.com/file_es.doc',
},
}}
/>
</body>
Best for single page applications that don't need SEO.
Usage: put GlobalSeoScript component at the end of the body tag.
File to modify for page router: pages/_document.js
File to modify app router: app/layout.js
import Head from "next/head";
import {GlobalSeoScript} from "globalseo-next";
<body>
<GlobalSeoScript
translationMode="client_side_only"
apiKey="YOUR_API_KEY"
originalLanguage="en"
allowedLanguages="en, es"
excludeClasses="class1, class2"
excludeIds="id1, id2"
useBrowserLanguage="true"
/>
</body>
Put GlobalSeoSelector component where you want the language switcher to appear.
Example on page router: pages/language-selector-app-router.tsx
Example on app router: app/language-selector-app-router/page.tsx
import {GlobalSeoSelector} from "globalseo-next";
<GlobalSeoSelector color="#000" />
- apiKey: Replace YOUR_API_KEY with the actual API key obtained from your project.
- originalLanguage: The original language of the website.
- allowedLanguages: The languages that the website will be translated to.
- translationMode: Set to
subdomainto use subdomains for translated pages. - domainSourcePrefix: If your website already implemented internationalization with path prefix, you can set this to the path prefix. For example, if your website has
/en/page-nameyou can set this to/enso we can serve the page fromen.yourdomain.com/page-nameinstead ofen.yourdomain.com/en/page-name - customLinks: Custom links for each language. The key must be exactly the same as the value of the
hrefattribute of the link.
- useBrowserLanguage: Automatically sets the language based on the user's browser language. Set to
falseto disable. - excludeClasses: List CSS class names to exclude from translation, separated by commas (e.g.,
chatbot, no-translate). - excludeIds: List IDs to exclude from translation, separated by commas (e.g.,
user-comment, code-snippetwill prevent translation of elements with IDuser-commentandcode-snippet).
- translateAttributes: Translates
title&altattributes of images and links. Improves SEO and accessibility. Set totrueto enable. - langParameter: URL parameter for setting the language (default: "lang"). Use a custom value if preferred.
- delay: Delay (in milliseconds) before the translation service activates, ensuring the page content is fully loaded.
- replaceLinks: Replaces links with translated URLs by appending the language code. Set to
falseto disable. - customLanguageCode: Custom language code for the language selector (e.g.,
kk=kzfor "KZ" instead of "KK"). - excludeContents: Excludes specific text from translation using regular expressions. Format:
{{regex1}} {{regex2}}. - translateFormPlaceholder: Translates form placeholders. Set to
trueto enable. - dynamicTranslation: Allow GlobalSEO to automatically generate new translations. Set to
falseto disable. If you have already reached the quota limit, setting this to false will prevent the error message from appearing on your site. - translateSelectOptions: Translate options inside select tag. Set to
trueto enable. Theglobalseo-excludeclass will still be respected.