multilingual website hindi marathi

SDX VISION

Cover Image for multilingual website hindi marathi

SDX VISION

December 13, 2025

Creating multilingual websites for Hindi and Marathi markets requires proper implementation of language switching, translation, and localization. This guide will teach you how to build multilingual websites effectively.

Why Multilingual Websites Matter

Benefits:

Reach More Users: Access to Hindi and Marathi speakers
Better User Experience: Content in user's language
Higher Conversions: Users prefer native language
SEO Benefits: Rank in multiple languages
Market Expansion: Enter new markets

Planning Your Multilingual Site

Step 1: Define Language Strategy

Approaches:

1. Full Translation:

All content translated
Complete localization
Best user experience

2. Partial Translation:

Key pages translated
Important content only
Cost-effective

3. User-Generated:

Community translations
Crowdsourced
Lower cost

Step 2: Choose Implementation Method

Options:

1. Subdirectories:

example.com/hi/  (Hindi)
example.com/mr/  (Marathi)
example.com/     (English)

2. Subdomains:

hi.example.com  (Hindi)
mr.example.com  (Marathi)
example.com     (English)

3. Different Domains:

example.in      (Hindi/Marathi)
example.com     (English)

4. URL Parameters:

example.com?lang=hi
example.com?lang=mr

Best Practice: Use subdirectories (SEO-friendly)

Implementation Methods

Method 1: Next.js i18n

Setup:

1. Install Dependencies:

npm install next-intl

2. Configure i18n:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'hi', 'mr'],
    defaultLocale: 'en',
  },
};

3. Create Translation Files:

messages/
  ├── en.json
  ├── hi.json
  └── mr.json

4. Use Translations:

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('HomePage');
  
  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

Method 2: React i18next

Setup:

1. Install:

npm install react-i18next i18next

2. Configure:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: require('./locales/en.json') },
    hi: { translation: require('./locales/hi.json') },
    mr: { translation: require('./locales/mr.json') },
  },
  lng: 'en',
  fallbackLng: 'en',
});

3. Use in Components:

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  
  return <h1>{t('welcome')}</h1>;
}

Method 3: WordPress Multilingual

Plugins:

WPML
Polylang
Weglot

Setup with Polylang:

Install Polylang plugin
Add languages (Hindi, Marathi)
Create translations
Configure language switcher

Language Switcher Implementation

Component Example:

// LanguageSwitcher.jsx
import { useRouter } from 'next/router';
import Link from 'next/link';

const languages = [
  { code: 'en', name: 'English', flag: '🇬🇧' },
  { code: 'hi', name: 'हिंदी', flag: '🇮🇳' },
  { code: 'mr', name: 'मराठी', flag: '🇮🇳' },
];

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locale, pathname, asPath } = router;
  
  return (
    <div className="language-switcher">
      {languages.map((lang) => (
        <Link
          key={lang.code}
          href={asPath}
          locale={lang.code}
          className={locale === lang.code ? 'active' : ''}
        >
          {lang.flag} {lang.name}
        </Link>
      ))}
    </div>
  );
}

Translation Management

Translation Files Structure:

English (en.json):

{
  "homepage": {
    "title": "Welcome to Our Website",
    "description": "We provide digital marketing services",
    "cta": "Get Started"
  },
  "about": {
    "title": "About Us",
    "description": "Learn more about our company"
  }
}

Hindi (hi.json):

{
  "homepage": {
    "title": "हमारी वेबसाइट में आपका स्वागत है",
    "description": "हम डिजिटल मार्केटिंग सेवाएं प्रदान करते हैं",
    "cta": "शुरू करें"
  },
  "about": {
    "title": "हमारे बारे में",
    "description": "हमारी कंपनी के बारे में अधिक जानें"
  }
}

Marathi (mr.json):

{
  "homepage": {
    "title": "आमच्या वेबसाइटवर आपले स्वागत आहे",
    "description": "आम्ही डिजिटल मार्केटिंग सेवा प्रदान करतो",
    "cta": "सुरू करा"
  },
  "about": {
    "title": "आमच्याबद्दल",
    "description": "आमच्या कंपनीबद्दल अधिक जाणून घ्या"
  }
}

SEO for Multilingual Sites

1. Hreflang Tags

Implementation:

<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="hi" href="https://example.com/hi/" />
<link rel="alternate" hreflang="mr" href="https://example.com/mr/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

2. Language-Specific URLs

Structure:

example.com/en/page
example.com/hi/page
example.com/mr/page

3. Meta Tags

Language-Specific:

<!-- English -->
<html lang="en">
<meta name="language" content="English">

<!-- Hindi -->
<html lang="hi">
<meta name="language" content="Hindi">

<!-- Marathi -->
<html lang="mr">
<meta name="language" content="Marathi">

4. Sitemap

Multilingual Sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>https://example.com/en/</loc>
    <xhtml:link rel="alternate" hreflang="hi" href="https://example.com/hi/"/>
    <xhtml:link rel="alternate" hreflang="mr" href="https://example.com/mr/"/>
  </url>
</urlset>

Font and Typography

Hindi and Marathi Fonts:

Recommended Fonts:

Noto Sans Devanagari
Mukta
Poppins (supports Devanagari)
Hind

Implementation:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&display=swap');

.hindi, .marathi {
  font-family: 'Noto Sans Devanagari', sans-serif;
}

Font Loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari&display=swap" rel="stylesheet">

Right-to-Left (RTL) Considerations

Note: Hindi and Marathi use left-to-right (LTR) script, so no RTL handling needed.

Content Localization

Beyond Translation:

1. Cultural Adaptation:

Local examples
Regional references
Cultural sensitivity
Local preferences

2. Date/Time Formats:

Indian date format (DD/MM/YYYY)
12-hour time format
Local timezone

3. Currency:

Indian Rupee (₹)
Local formatting
Regional pricing

4. Contact Information:

Local phone format
Indian addresses
Regional offices

Testing Multilingual Sites

Testing Checklist:

[ ] All languages load correctly
[ ] Language switcher works
[ ] URLs are correct for each language
[ ] Content displays properly
[ ] Fonts render correctly
[ ] Forms work in all languages
[ ] SEO tags are correct
[ ] Mobile experience is good
[ ] Performance is maintained

Best Practices

1. Consistent Translation

Guidelines:

Use professional translators
Maintain terminology
Review translations
Update regularly

2. User Experience

Considerations:

Easy language switching
Remember user preference
Auto-detect language
Clear language indicators

3. Performance

Optimizations:

Lazy load translations
Cache translations
Optimize font loading
Minimize bundle size

4. SEO

Requirements:

Proper hreflang tags
Language-specific URLs
Translated meta tags
Localized content

Common Challenges

Challenge 1: Font Rendering

Solutions:

Use web fonts
Preload fonts
Fallback fonts
Test rendering

Challenge 2: Content Length

Solutions:

Flexible layouts
Responsive design
Test all languages
Adjust as needed

Challenge 3: Translation Quality

Solutions:

Professional translators
Native speakers
Review process
Regular updates

Implementation Checklist

[ ] Languages selected
[ ] Implementation method chosen
[ ] Translation system set up
[ ] Content translated
[ ] Language switcher implemented
[ ] SEO configured
[ ] Fonts optimized
[ ] Testing completed
[ ] Performance optimized
[ ] Monitoring set up

Next Steps

Plan Strategy: Define language approach
Choose Method: Select implementation
Set Up System: Configure i18n
Translate Content: Get translations
Implement: Build multilingual site
Test: Validate all languages
Optimize: Improve performance
Launch: Deploy multilingual site

Thanks for reading the blog. If you want more help, do contact us at https://sdx.vision

Blog.

multilingual website hindi marathi

Why Multilingual Websites Matter

Benefits:

Planning Your Multilingual Site

Step 1: Define Language Strategy

Step 2: Choose Implementation Method

Implementation Methods

Method 1: Next.js i18n

Method 2: React i18next

Method 3: WordPress Multilingual

Language Switcher Implementation

Component Example:

Translation Management

Translation Files Structure:

SEO for Multilingual Sites

1. Hreflang Tags

2. Language-Specific URLs

3. Meta Tags

4. Sitemap

Font and Typography

Hindi and Marathi Fonts:

Right-to-Left (RTL) Considerations

Content Localization

Beyond Translation:

Testing Multilingual Sites

Testing Checklist:

Best Practices

1. Consistent Translation

2. User Experience

3. Performance

4. SEO

Common Challenges

Challenge 1: Font Rendering

Challenge 2: Content Length

Challenge 3: Translation Quality

Implementation Checklist

Next Steps