how do i put a pdf on my website without a broken viewer
web · 2026-10-06 · 3 min
putting a pdf on a website can mean two different things: a link that downloads the file, or a viewer embedded in the page. the first is a good idea. the second is usually a bad one, because browsers handle pdfs differently, phones handle them badly, and a pdf is not a web page.
link it, do not embed it
upload the file, copy its url, and link to it with a clear label: menu-2026.pdf, 1.2 mb. that last part is useful, because people on a phone want to know what they are downloading. if the content matters, put a short html summary on the page as well, with the key information as text, and offer the pdf as the printable version.
if you must embed
the object element with an iframe fallback is the old, still working way. google drive's preview is the quick way and the ugly one: it brings its own toolbar and its own tracking. pdf.js gives you control but is a project. on iphone, safari often shows only the first page or downloads the file instead of displaying it, so test on a real phone before promising a reader.
the accessibility and seo cost
a pdf is a closed box: search engines index it poorly, screen readers read it in the order the file was made, and links inside it do not pass authority to your pages. if the document is a menu or a price list, the same content as html will be found, translated and read aloud. keep the pdf for the version someone prints.
faq
why does my pdf not open on a phone?
because mobile browsers treat pdfs as downloads rather than pages, and some in-app browsers, like the one inside instagram, cannot display them at all. a link that downloads is more honest than a viewer that shows a blank rectangle.
should i compress the file?
yes, if it is over two or three megabytes. most of the weight is images: export them at 150 dpi, use jpeg for photos, and remove the ones nobody needs. a text-only pdf should be a few hundred kilobytes.
is a pdf bad for seo?
it can rank on its own for specific searches, but it will not help the page that contains it. the html version is the one that earns links and gets read on a phone. publish the html first, the pdf second.