マルチリピ makes it easy to translate and optimize your website for multilingual SEO. If you're running a React-based site, here’s how you can integrate MultiLipi in under 5 minutes — no complicated setup, no backend changes.

What You’ll Need

  • ある React app (using App.js又は App.tsx)
  • Your MultiLipi API Key
  • The list of target languages(例: こんにちは , アール )
  • Your main domain(例: example.com )

Step-by-Step Integration Guide

Step 1: Create a File Named multilipi.tsx又は multilipi.js

Inside your src/ folder (or any component folder), create a file to store the MultiLipi script logic.

Paste the following code inside:

// multilipi.tsx

import { useEffect } from "react";

 

const LANGUAGES = ["hi", "ar"] as const; // Replace with your languages

const DOMAIN = "example.com";           // Replace with your actual domain

const MULTILIPI_KEY = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"; // Replace with your actual key

 

export default function AddScriptToHead() {

  useEffect(() => {

    const head = document.head;

    const added: HTMLElement[] = [];

 

    const add = <T extends HTMLElement>(el: T) => {

      head.appendChild(el);

      added.push(el);

      return el;

    };

 

    // Alternate hreflang links

    LANGUAGES.forEach((lang) => {

      const link = document.createElement("link");

      link.rel = "alternate";

      link.hreflang = lang;

      link.href = `https://${lang}.${DOMAIN}/`;

      add(link);

    });

 

    // DNS prefetch & preconnect

    const dns = document.createElement("link");

    dns.rel = "dns-prefetch";

    dns.href = "//multilipiseo.multilipi.com";

    add(dns);

 

    const preconnect = document.createElement("link");

    preconnect.rel = "preconnect";

    preconnect.href = "https://multilipiseo.multilipi.com";

    preconnect.crossOrigin = "anonymous";

    add(preconnect);

 

    // Add MultiLipi translation script

    const script = document.createElement("script");

    script.src = "https://script-cdn.multilipi.com/static/JS/page_translations.js";

    script.crossOrigin = "anonymous";

    script.dataset.posX = "50";

    script.dataset.posY = "50";

    script.setAttribute("multilipi-key", MULTILIPI_KEY);

    script.setAttribute("mode", "auto");

    add(script);

 

    // Cleanup on component unmount

    return () => {

      added.forEach((el) => el.parentNode?.removeChild(el));

    };

  }, []);

 

  return null;

}

Customize Before Proceeding:

  • 取り替える LANGUAGES with the languages you want to add (e.g., "fr", 「デ」 )
  • Update DOMAIN with your actual domain (no subdomains)
  • Add your MultiLipi keyで MULTILIPI_KEY

Step 2: Import It in Your App File

Now open your App.tsx又は App.js file and import the script you just created.

// App.tsx

import AddScriptToHead from './multilipi'; // adjust the path as needed

 

function App() {

  return (

    <>

      {/* Load the MultiLipi script */}

      <AddScriptToHead />

 

      {/* Rest of your App UI */}

    </>

  );

}

 

export default App;

Place <AddScriptToHead /> at the top of your return block so it loads before your actual content — this ensures the translated elements appear correctly and smoothly.

これで完了です。

Once you've followed the above steps:

  • Your site will now be multilingual-enabled.
  • Users will see a floating language switcher.
  • Pages will render the translated version based on user-selected language or auto-detection.

Additional Notes

  • 🔐 Secure Integration
    The MultiLipi script is securely delivered via CDN and requires a unique API key tied to your account.

  • ⚡ Performance Optimized
    Uses dns-prefetchそして preconnect techniques to reduce latency and speed up the loading time of your translation widget.
  • 🌎 SEO Friendly by Design
    Automatically injects hreflang alternate language tags in the page <head> to ensure proper indexing and visibility on multilingual search results.
  • 🖥️ Frontend-Only Implementation
    No backend changes required — works seamlessly with static React builds and Jamstack sites too.

ヘルプが必要ですか?

Still stuck or want to verify your integration?
Reach out to our support team or check out our Visual Editor for real-time translation customization.