> ## Documentation Index
> Fetch the complete documentation index at: https://docs.locadapt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# URL Setup

> Configure your URL structure for optimal localization and SEO

Locadapt offers three main URL structure options, with subdomains providing the best SEO benefits through our reverse proxy service, but query parameters being the easiest to implement.

## URL Structure Options

<Tabs>
  <Tab title="Query Parameters">
    **Example:** `https://example.com/?lang=de`

    * Simplest to implement
    * No server configuration required
    * Less ideal for SEO
    * Works out of the box with anything
    * Easy to switch between languages client-side

    #### Implementation

    No extra setup is needed for query parameter routing. It works out of the box with most web frameworks and is automatically implemented client-side by Locadapt.
  </Tab>

  <Tab title="Subdirectory">
    **Example:** `https://example.com/de/`

    * Fair balance of SEO and ease of implementation
    * Requires configuration on either server-side or client-side
    * Better for SEO than query parameters
    * Cleaner URL structure

    #### Implementation

    The implementation approach depends on your tech stack. You'll typically need to choose either server-side or client-side configuration, not both.

    <Tabs>
      <Tab title="Server-Side">
        If you're using a server-side framework like Express.js, configure your server to handle requests for different language subdirectories:

        ```javascript theme={null}
        const express = require('express');
        const app = express();

        const supportedLanguages = ['de', 'fr', 'es', 'ja', 'zh-CN', 'hi', 'he', 'ar'];

        app.use((req, res, next) => {
          const langPath = req.path.split('/')[1];
          if (supportedLanguages.includes(langPath)) {
            req.language = langPath;
          }
          next();
        });
        ```

        This middleware detects the language from the URL path and sets it in the request object.
      </Tab>

      <Tab title="Client-Side">
        For client-side routing (e.g., in Next.js), use middleware to handle subdirectory routing:

        ```typescript theme={null}
        import { type NextRequest, NextResponse } from 'next/server';

        const supportedLanguages = new Set(['de', 'fr', 'es', 'ja', 'zh-CN', 'hi', 'he', 'ar']);

        export async function middleware(request: NextRequest) {
          const pathname = request.nextUrl.pathname;
          const pathnameIsMissingLocale = supportedLanguages.every(
            (lang) => !pathname.startsWith(`/${lang}/`) && pathname !== `/${lang}`
          );

          if (pathnameIsMissingLocale) {
            const locale = 'en'; // Default language
            return NextResponse.redirect(new URL(`/${locale}${pathname}`, request.url));
          }
        }

        export const config = {
          matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
        };
        ```

        This middleware ensures all routes are properly localized by redirecting to the appropriate language subdirectory.
      </Tab>
    </Tabs>

    Choose the approach that best fits your application architecture. If you're using a full-stack framework, you might need to configure both server and client sides - refer to your framework's internationalization guide, our site-specific integration guides on the sidebar, or [contact support](mailto:support@locadapt.com) for specific instructions.
  </Tab>

  <Tab title="Subdomain (Paid)">
    **Example:** `https://de.example.com`

    * Best for SEO — guaranteed indexing by search engines
    * Requires DNS configuration
    * Slightly more complex setup
    * Cleaner URL structure
    * Can be perceived as separate sites by search engines

    <Tip>
      For SEO-critical businesses, we strongly recommend using subdomains with our reverse proxy service. We are happy to help you with the setup.
    </Tip>

    ### Setup Steps:

    1. Configure your DNS:
       Add a CNAME record pointing your wildcard subdomain, `*.example.com`, to our reverse proxy at `proxy.locadapt.com`:

       ```
       *.example.com  CNAME  proxy.locadapt.com
       ```

       In case the above sounds unfamiliar — your DNS is your website's current registrar (*usually* but not always where you bought it, e.g. GoDaddy, Namecheap, Wordpress, etc.). If you Google "add CNAME record \<my DNS provider>", you'll find detailed instructions for how to do so. There's typically an intuitive admin dashboard for your domain where you can add this in just a few clicks.

    2. Update your Allowed Domains in [the Locadapt config page](https://app.locadapt.com/configuration), adding in `*.yoursite.com`

       ```
       ..., *.example.com, ...
       ```

       Or if you want to be more specific:

       ```
       ..., de.example.com, zh-CN.example.com, ...
       ```

       The subdomains here will be ISO language codes.

           <Info>
             With subdomains, only one primary domain is allowed per project. (i.e. you can list `app.locadapt.com`, `locadapt.com`, `fr.locadapt.com` as allowed domains as they all point to the same domain, but not e.g. `mysite.com` and `*.myothersite.com`.)

             Create separate projects if you want Locadapt to run on multiple primary domains (best practice is to do this anyway).
           </Info>

    3. Wait a couple minutes for DNS changes to propagate, then visit your site at (e.g.) `https://de.example.com`!

           <Note>
             For SEO to work optimally, the translated page must be first visited by a real user before Google's bot crawls it. This ensures the content is properly generated and stored on our servers.

             We choose to do this, instead of translating the content on the server if it's not in our servers, as this leads to a much faster page load for your end users. Either way, the content will be translated client-side for the end user as well.
           </Note>
  </Tab>
</Tabs>