To send an HTML file in Discord and have people see the page, send a link to the page, not the file. Upload the .html file itself and Discord shows its source code in a preview box, with an Expand button and a download icon.
The page is in there somewhere. Nobody in the channel will see it without downloading the file and opening it in a browser, and on a phone that is several extra steps.
This guide covers what Discord does with each way of sending HTML, and how to make the link card look right.
What Discord does with an uploaded .html file
An .html file is plain text, and Discord's file preview shows plain text files as text: the first several lines, an Expand button that shows up to 100 lines in the chat, and a pop-out view that shows up to 50 KB of the file.
That is useful for a config file. It is useless for a web page, because the reader sees <!doctype html> and a style block instead of the charts and numbers the markup draws.
Size is not the issue. As of September 2026, Discord lists 20 MB for free accounts, 50 MB for Nitro Basic and up to 500 MB for Nitro. The upload works; source code is what comes out the other end.
Why a preview is not the page
HTML is not a document format like a PDF. It is closer to a small program: it can run scripts and load content from other sites. A text preview shows what the program says, not what it draws.
Most chat apps handle uploaded web pages this way. Slack shows a file card, and Discord's help article describes a text preview for text files. Running an uploaded page inside the app is a different kind of feature, and it is not one Discord lists.
So plan around the preview. If people need to see the page, give them an address to open.
Pasting the code in a code block does not help either
The next thing people try is pasting the markup between three backticks with html after them. Discord colours it nicely:
It is still code. Nobody sees the chart, and a real page is long. Discord caps a message at 2,000 characters, or 4,000 with Nitro. Paste past that and Discord offers to send it as a message.txt file, which puts you back at the first screenshot.
A code block is right when the markup is the point: someone asked how you built a layout, or you want the structure reviewed. It is wrong when the point is what the markup draws.
What each way of sending produces
| What you send | What the channel shows | What the reader has to do |
|---|---|---|
The .html file |
Source code preview with Expand and download | Download it, find it, open it in a browser |
| A code block | Coloured source code | Read markup instead of the page |
| A screenshot | The picture | Nothing, but the page is frozen and uncopyable |
| A PDF export | A file card with a download | Download it, and any interactive parts are gone |
| A link to the page | A card with title, description and image | Open the link |
Only the last row gets anyone to the actual page in one action. The screenshot is fine for a quick look at something final. It stops being fine the moment a number in it can change, because the copy in the channel is now permanently wrong.
How to send the page as a link: 4 steps
- Give the page an address. Paste the HTML into a NOS document and copy the link from Share › Share link. Turning HTML into a link is one paste.
- Check the title, description and image. Discord's preview bot visits the address and reads the page's title, description and image from the tags in its head:
<title>Weekly report · week of 21 Sep</title>
<meta property="og:site_name" content="NOS">
<meta property="og:description" content="Signups, active teams and reply time.">
<meta property="og:image" content="https://example.com/card.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#d5f525">
The last two lines are optional. Many sites set twitter:card to summary_large_image to ask for a large picture, and theme-color for an accent colour; how each app uses them is up to the app. Open Graph tags explains the rest. NOS share links already carry their own title, description and image.
- Post the link with one line of context. "Weekly numbers, signups up 12%." The card appears under your message.
- Fix the page, not the post. When someone spots a mistake, edit the page. The link already in the channel points at the fixed version, so there is no "ignore that, here is v2" message.
What the reader sees on a phone
On a phone the file route is unreliable. A downloaded .html file may end up in a file manager or a basic preview rather than a browser. See opening an HTML file on a phone for why.
A link has none of that. The reader opens the link, a browser loads it, and the page draws the way you built it.
When the card does not appear
If you post a link and no card shows up, check these in order:
- The page needs a login. Discord's preview bot visits the address without your login. If it hits a sign-in wall, the card shows the sign-in page or nothing.
- The page has no title or og tags. Discord has nothing to put on the card.
- The image address is relative.
og:imagemust be a fullhttps://address to a real image file. - Link previews are switched off. Server admins can remove the permission to embed links in a channel, and each reader can turn previews off in their own settings.
- The old image still shows. Discord may keep a copy of a linked image for a while. Adding
?v=2to the end makes it a new address.
To check the markup renders before you send it, open it in the HTML viewer.
The same problem in other apps
Discord is not unusual here. Slack shows a file card, Teams files it in the channel's library, WhatsApp hands the reader a document, and LinkedIn has no upload type for it at all. Each of them shows an uploaded page as a file or as text, not as a page.
A link is the one thing all of them treat the same way, which is why a link beats an attachment almost everywhere.
In NOS the pasted HTML becomes a page at a fixed address. The wording stays editable by clicking it, so a correction takes seconds, and the card in the channel keeps pointing at the current version however many times you revise it.