## 🔍 Why the OG Image Requires Updates in Two Places

Website Studio React projects store the OpenGraph image URL in **two separate locations**. Updating only one causes a split result: social media platforms and crawlers — which read raw static HTML — continue to display the old image, while your browser's Inspect Element panel shows the correct new image because the React application has already updated the live DOM in memory using the newer value.

The two files that must both be updated are:

- **index.html** (project root) — contains the static **og:image** meta tag inside the page head, read directly by search crawlers and social media link-preview generators at the raw HTML level
- **src/pages/Index.tsx** — contains the **OG\_IMAGE\_URL** constant used by the React application at runtime to dynamically hydrate the Open Graph image tag in the live DOM

Both files must contain the same absolute URL, and a full republish must be performed after saving both files for the changes to appear in raw page source.



## 📁 Accessing Your Site Files in Website Studio

To edit your site's source files, navigate to **Left sidebar → Website Studio**. Select your site and open the built-in code editor. From the file tree you can open and edit all project files, including **index.html** at the project root and the TypeScript source files under **src/pages/**.



## ✏️ How to Update the OG Image in Both Required Files

Complete both steps below before republishing. Saving only one file and republishing will not fully resolve the issue and will leave the discrepancy in place.

1. In the Website Studio code editor (**Left sidebar → Website Studio → [your site] → Code Editor**), open **index.html**. Locate the meta tag where the property attribute is set to **og:image** inside the head section. Update the content attribute value to your new absolute image URL — for example, **https://yourdomain.com/assets/og-image.png**. Save the file.
2. Open **src/pages/Index.tsx**. Near the top of the file, find the constant named **OG\_IMAGE\_URL**. Update its value to the exact same absolute URL you entered in **index.html**. Save the file.

Always use a fully qualified absolute URL beginning with **https://**. Relative paths such as **/assets/og-image.png** are not resolved correctly by social media crawlers and will cause the preview image to fail to load.



## 🚀 Republishing Your Site After Updating Both Files

Once both files are saved, you must trigger a full rebuild and republish so the changes are compiled into the static HTML output delivered to browsers and crawlers. In Website Studio (**Left sidebar → Website Studio → [your site] → Publish**), click the **Publish** button to rebuild and deploy your site. Saving files without republishing will not update the raw HTML served to crawlers or to users loading the page for the first time.

After the republish completes, perform a hard refresh in your browser — press **Ctrl + Shift + R** on Windows and Linux, or **Cmd + Shift + R** on macOS — to bypass your local browser cache and confirm you are viewing the freshly deployed HTML file.



## ❓ Why View Page Source Shows the Old Image After Republishing

Seeing a mismatch where **View Page Source** displays the old OG image URL while **Inspect Element** shows the correct new URL is caused by a caching or build artefact. The two browser views read from entirely different sources:

- **View Page Source** displays the raw static HTML file as delivered by the server. If the build cache was not fully cleared or the deployment has not yet propagated, this file will still contain the previous **og:image** value — this is the exact version crawlers and social platforms read.
- **Inspect Element** displays the live DOM after the React application has executed in the browser. Because the JavaScript bundle was updated with the new **OG\_IMAGE\_URL** constant from **src/pages/Index.tsx**, the React app sets the correct image in the live DOM — even if the underlying static HTML has not yet caught up.

This is precisely why updating **src/pages/Index.tsx** alone appears to fix the image in the browser but does not fix what social media platforms and search crawlers see. Updating **index.html** alone fixes the crawler view but leaves the live DOM temporarily inconsistent. **Both files must be updated together**, followed by a full republish, to eliminate the discrepancy entirely.



## ✅ Verifying the OG Image Updated Correctly

After republishing, confirm the update was fully applied using the following checks in order:

1. Open your published site URL in a new incognito or private browser window, right-click anywhere on the page, and select **View Page Source**. Search the source for **og:image** and confirm the content value shows the new absolute URL — not the old one.
2. Use an Open Graph debugger to force a fresh crawl and preview the updated image. Search your browser for **LinkedIn Post Inspector** or **Facebook Sharing Debugger**, paste your site URL, and click the button to request a fresh scrape. The new image should appear in the preview.
3. If **View Page Source** still shows the old URL after a confirmed republish, return to **Left sidebar → Website Studio → [your site] → Code Editor**, verify that both **index.html** and **src/pages/Index.tsx** contain the updated absolute URL, save both files, and republish again.

If you need further assistance, open the chat widget in the bottom-right corner of the platform and type **human teammate** to be connected with a member of our team.