Strange Characters on Website? Encoding Fixes

Strange Characters on Website? Encoding Fixes


Have you ever visited a website and encountered strange characters like question marks in black diamonds () or other odd symbols instead of normal text? This issue often arises from character encoding problems, where the website's character set doesn't match the browser's or database's character set. This guide provides detailed steps to troubleshoot and fix these encoding issues, with a focus on UTF-8 and database collation.

Understanding Character Encoding

Character encoding is a system that translates characters (letters, numbers, symbols) into a format that computers can understand and display. UTF-8 is the most widely used character encoding standard on the web because it can represent characters from almost all writing systems. When different encoding systems are used, or when there are inconsistencies, characters are misinterpreted, leading to the display of strange symbols.

1. Check Website's Character Encoding (HTML)

The first step is to ensure that your website's HTML specifies the correct character encoding, which should ideally be UTF-8.

How to Check and Set HTML Encoding:

  • View Page Source: Right-click on the web page in your browser and select "View Page Source" (or similar, depending on your browser).

  • Search for Character Set: Look for the `` tag within the `` section of the HTML code that defines the character set. It should look like this: ``

  • Set or Modify Character Set: If the charset is missing, add the `` tag within the `` section. If it's set to a different encoding, change it to UTF-8.

  • Save Changes: Save the changes to your HTML file and upload it to your server.

2. Check and Set Database Encoding and Collation

If your website uses a database (like most WordPress sites do), the database itself, the tables within it, and the columns in those tables must also be set to use UTF-8. Collation is a set of rules that define how characters are compared and sorted. For UTF-8, a common collation is `utf8mb4_unicode_ci` or `utf8mb4_general_ci`.

How to Check and Set Database Encoding and Collation (using phpMyAdmin):

  • Access phpMyAdmin: Log in to your hosting control panel and open phpMyAdmin.

  • Select Your Database: Choose the database used by your website.

  • Check Database Collation:

    • On the "Operations" tab, check the "Collation" for the database. If it's not a UTF-8 collation, change it to `utf8mb4_unicode_ci` or `utf8mb4_general_ci`.

  • Check Table Collation:

    • Select a table.

    • Go to the "Operations" tab.

    • Check the "Collation" for the table. Change it to `utf8mb4_unicode_ci` or `utf8mb4_general_ci` if necessary.

  • Check Column Collation:

    • Select a table.

    • Go to the "Structure" tab.

    • For each text-based column (e.g., VARCHAR, TEXT), click "Change".

    • Check and change the "Collation" to `utf8mb4_unicode_ci` or `utf8mb4_general_ci` if needed.

  • Database Connection Collation:

    • Sometimes, the database connection also has a collation setting. You might need to add a line to your `wp-config.php` file (for WordPress) to ensure UTF-8 is used:

      `define('DB_CHARSET', 'utf8mb4');`

      `define('DB_COLLATE', 'utf8mb4_unicode_ci');`

  • How to Identify and Fix Database Connection Errors on Your Website/

3. Check File Encoding

Ensure that the files themselves (e.g., PHP files, CSS files) are saved with UTF-8 encoding. Text editors like Notepad++, Sublime Text, VS Code, and others allow you to specify the encoding when saving a file.

How to Check and Set File Encoding (using Notepad++):

  • Open the File: Open the file in Notepad++.

  • Check Encoding: Go to the "Encoding" menu to see the current encoding. It should be "UTF-8".

  • Convert to UTF-8: If it's not UTF-8, select "Convert to UTF-8" (or "Encode in UTF-8").

  • Save the File: Save the file.

4. Character Encoding in PHP

If you're using PHP to generate content, ensure that PHP is also handling character encoding correctly.

How to Handle Character Encoding in PHP:

  • PHP Header: You can send a header to the browser specifying UTF-8: `header('Content-Type: text/html; charset=utf-8');` This should be placed before any output is sent.

  • `mb_internal_encoding()`: PHP's Multi-Byte String functions are useful for handling UTF-8. Set the internal encoding: `mb_internal_encoding('UTF-8');`

5. Browser Issues

In rare cases, the browser might be misinterpreting the encoding. Try these steps:

  • Reload the Page: Sometimes a simple refresh (Ctrl+F5 or Cmd+Shift+R) will fix it.

  • Try a Different Browser: See if the issue persists in Chrome, Firefox, Safari, etc.

  • Browser Encoding Settings: Most browsers have settings to select the character encoding, but usually, they auto-detect it. It's best to rely on correct encoding from the server.

Troubleshooting Tips

  • Be Consistent: The most important thing is to be consistent with your encoding throughout your website (HTML, database, files).

  • Test Thoroughly: After making changes, test your website thoroughly, especially pages with user-generated content or content in multiple languages.

  • Backup Your Database: Before making any changes to your database, always create a backup. Why Website Backups Matter: How to Create and Test Them/

By systematically checking and correcting the character encoding at each level of your website, you can eliminate those pesky strange characters and ensure that your content is displayed correctly to all visitors. If you need further assistance, contact WebCareSG for professional website support.


Related WebCare Solutions

Why is My Website Not Showing Up on Google: A Detailed Guide

A comprehensive guide exploring the various reasons why your website might not be visible in Google search results and how to address them.

How to Improve Website Crawlability and Indexing

Learn the essential steps to improve your website’s crawlability and indexing to boost search engine rankings and visibility.

Why Does My Website Look Different on Phones? (Testing Tools, Common Mobile Bugs)

Detailed guide explaining why websites might display differently on mobile devices, covering testing tools and common mobile-specific issues with solutions.

Ready to get started?

Focus on your business while we fix your website. Contact WebCareSG today for fast, reliable solutions!

Whatsapp us on

+65 9070 0715