How Do I Add a PDF to My Webpage?
“I’d like to add a PDF of our magazine to our website but the file name is grey and won’t upload. Can you help me?”
Here at Goodwin Creative studios we often have clients wondering how to upload their PDF to their web page and with all the different kinds of file formats and media available to use these days, this is a good question!
Web pages display images.
An image can be a photo, a poster, or even an animated gif. Common image file formats are:
.jpg or .jpeg
.gif
.png
These image files can be uploaded to your Squarespace site by choosing an image block or gallery block. You are then invited to either upload your image file or choose from your website’s library.
SEO TIP: Be sure to name your image files with good key-word rich names before uploading them to your website. This will help Google find your image for people who might be looking for you and your services. An image name such as D2017532.jpeg will not rank well on Google but if it was GreekFoodInSquamish.jpeg it would rank really well for people looking for Greek Food in Squamish.
Web pages do not display documents.
Documents such as Word, Pages, or PDFs will not display on your web page. These files formats typically include:
.docx
.pages
.pdf
.csv
Anything that requires special software to open will not display on a webpage. For example, .docx is a Microsoft Word file. Pages is a Mac file. CSV is a spreadsheet file. Etc.
This is not to say you can’t have them on your website in some fashion. While they don’t ‘display’ you can link to them and upload the file to your website’s storage. When someone clicks on the link, the file will display in a new window or download to their desktop where they can open with software on their computer.
The most common file format people like to upload to their website is the PDF. The great thing about PDFs is that you can create a PDF file out of any of the other document formats, and it can be viewed right on the screen when the link is clicked.
Best of both worlds.
Here then is our recommended method for adding a document to your web page.
Step one:
Open your document and save it as a PDF. Be sure to give it a keyword-rich file name.
Step two:
Consider a screenshot. If your document has a lovely cover, we can use that cover as a clickable image on your website.Here’s how to take a screenshot of the cover.
Open the pdf and be sure you’re on Page 1. Using the size tools, reduce the image so it fits on your screen. Then -
On a mac: Control/Command/4 will turn your cursor into a plus sign and you can drag from the top left corner to the bottom right creating a perfect screenshot of your cover. This screenshot will be saved to your desktop.
On a PC: Windows Key + Shift + S. Your screen will dim and a mini menu will appear at the top of your screen, giving you the option to take a rectangular, free-form, window, or full-screen capture. After you capture the screenshot, it will be saved to your clipboard and a preview notification will appear in the lower-right corner of your screen
Now you need to find the file, and rename it to match the subject matter. Names such as “mycompanyreportmarch2020.jpg” or “ourrestaurantsmenu.jpg” are perfect.
Step three:
Upload to your web page
Login to your Squarespace site and click on Pages.
Choose the page where you want to add the PDF.
In edit mode, place your cursor where you’d like to insert the document.
Text link. Type the name of the document, highlight it, and click on the LINK icon in the same way you create other kinds of links. In the Link Editor pop up, choose FILE. This will give you the option of uploading a file. Click Upload and navigate to where your PDF is on your desktop and upload. While it’s uploading you can slide the Open In New Page toggle to the right. Then be sure to select the file from the upload list (this will put a checkmark by it) and click save. This will return you to your link, but now you must also click APPLY. Save the page (top left corner) and your link is ready.
When someone visits the page, and clicks on the link, a new window will open and the PDF will be there for viewing. There is usually also an option to download the PDF.
Image link. Add an image block to the page where you want your cover image to show. Then click on the block and in the image popup, upload your cover image. Just below the upload box, you will want to place a link to the PDF. So click on the Gear. In the Link Editor pop up, click FILE. Click Upload and navigate to where your PDF is on your desktop and upload. While it’s uploading you can slide the Open In New Page toggle to the right. Then be sure to select the file from the upload list (this will put a checkmark by it) and click SAVE. You’ll be returned to the Image popup and you can see the link to your PDF in the link area. Save the page (top left corner) and you’re done!
When someone visits the page, and clicks on the image, a new window will open and the PDF will be there for viewing. There is usually also an option to download the PDF.
Let’s recap!
Important things to know about adding a PDF or other document to your website.
A webpage can display an image, but not a file.
Files a webpage can display are jpg, jpeg, gif, and png. Sometimes mp4 but more on that in a future article.
It’s possible to create a text link that will open or download a file.
It’s also possible to link an image to a file which will open or download.
Resources
This articles assumes you are familiar with updating your Squarespace site. As well, Squarespace has amazing resource pages and videos including these pages:
