How to Make a Blog Post Downloadable (e.g. PDF) With Easy Editing Option And No Duplicate Content For Free

Share the knowledge...

Facebook

Twitter

Linkedin

Intro

One of my subscribers, Bruce, suggested making access to my articles in a downloadable format (e.g. PDF).

And I thought it was finally time to do it this way or the other.

I had considered making downloadable PDFs before. But the tools (plugins) which automatically turn the blog posts and the pages into PDF files did not work very well for me. Mostly because I did not want the webpage containing the blog post would go as is to a PDF file. In other words, I wanted to easily edit the content which should appear in the PDF document. I did not want some sections get into PDF file (the comment section, the header etc).

Also, some elements can’t go to PDF by default. For example, videos can’t be converted to a PDF format obviously. So I’d like to add to a PDF file images and links to videos instead. Sometimes converting some objects like Javascript charts into PDF goes with issues.

Besides, creating PDFs from scratch for each article did not seem like something I wanted to do (too much work). So, I had to research and find the best and free way to turn my blog posts into downloadable PDF files which look good, can be easily manually edited.

And I want to share with you my findings and the tutorial how to turn any blog post or page into a downloadable format (e.g. PDF). Including how to let your visitors download the files (and make no duplicate content for your website).

Why not using a plugin to create PDF from a blog post?

Indeed, there are a number of plugins which allow automatically turn a blog post or a page into a PDF file. But I did not want to use plugins for that. Why so?

First of all, this is another plugin which adds up to website security risks and to slowing down performance . Also, some PDF plugins may be not careful by creating duplicate content on your site. It’s another risk.

But in fact the above points are of not that big importance. The main reason why I ceased from using a PDF-creating plugin is because I could not fully control the content of the created PDF files.

The point is that I don’t want some elements go into PDF (like website header, or comment section etc). I want to make the result PDF file as neat as possible with little efforts.

Besides, some elements (like the videos embedded on the page) may be not included in the generated PDFs. Whereas I’d prefer using a image instead of a video with the link to the video.

Also, Javasript-based tables or charts may be missing too (it depends on plugin).

And if you use a page builder (e.g. Elementor), then a plugin may bring you not satisfactory results (PDF may look not look as cool as a web page).

Anyway, if you are not very concerned about controlling or editing the content which goes to PDf, this method may be the easiest way to get PDF out of your blog post(s).

Why not using an online tool to create PDF from a blog post?

There are a bunch of free online tools which allow creating PDF files from any web page. You just save a page as complete HTML page (html file, images, CSS), zip it and upload to the online tool. And get a PDF.

This is a very simple and free way to get a PDF out of any webpage. Some online tools work better than others. In my limited tests html2pdf.com gave me good results.

But this method has one major drawback. You can’t control what will go into your PDF. I.e. what you have on your website page will go into a PDF file. You can’t remove, replace or edit the content.

Also, if you use a page builder then there are good chances that a created PDF file will not look good (broken layout, missing nice-looking elements).

You may want to edit the PDF file to make it okay. But editing PDF file itself is a pretty tedious task. It’s not as easy as editing in a text editor like MS Word.

Anyway, like the option of using a plugin, this method (converting directly from a webpage to a PDF) is a quick and easy way if getting the whole content from a webpage to PDF sounds good to you.

Does creating PDF from scratch sound good?

Creating a PDF file from scratch can give you the best quality of the result PDF file and no limits in what you can do (layout, design, additional elements etc) with it. But this takes too much time.

There are many ways how you can create a PDF from scratch.

One of the most convenient ways for an inexperienced user is to create a document in a text editor (e.g. MS Word) and then save the document as a PDF file.

If you want to go a professional way, you can use Adobe Illustrator or alternatives (both paid and free).

The Wiki has a good list listing software (not a full though) which can work with PDF files

There are also online tools which allow you create PDF files. But usually you need to pay for a full control of what you get in your PDF file.

The bottom line is that creating PDF from the ground up takes too much efforts (and in some cases money) for what I need. But in your case it may be an option. Why not.

Okay. What is your method of creating PDF from a blog post then?

In short, this goes like this:

1. Saving a blog post as a complete HTML page in your browser.
2. Opening the saved file in a word editor (e.g. MS Word).
3. Editing the content in the text editor (replacing broken elements with images, removing unnecessary elements, etc).
4. Saving the document as a PDF file (or another format of your choice available in the save as or export function of the text editor).

What are the benefits of this method?

• The main advantage is that you can edit the content freely like (almost) an ordinary MS Word file. You can add, remove or change and make it how you want it to be in your PDF file. Why I said “almost” – see below in the “disadvantages” section.
• Also, you are not limited to PDF format. You can save your post to DOC, PPT and tons of other formats.
• No need in plugins.
• It’s free.

You mentioned disadvantages. What are they?

Here comes a little sad part.

• Since when you edit the saved web document, it may have some restrictions. For example, I could not add headers or footers to the document using MS Word. As an attempt to fix it, I tried to open a document using a different text editor (LibreOffice) and re-save it (to a .doc format). But it caused an internal conflict and I could not proceed this way. Although you may try, perhaps it will work fine for you.
• Some elements (e.g. blocks built with plugins or page builders) may display in a text editor (e.g. MS Word) incorrectly (missing colors, broken alignment etc). In this case you will need to edit these elements in the text editor. For example, you can replace these elements with images (screenshots) from your web page.
• Also, when exporting the document from MS Word to PDF file there may be a little bit different colors of the background of the text and document’s background. This happens if your website’s theme background color is different from your content background color. And whereas on your website if looks fine, in a PDF file it may look so-so.
   
  Here is how it looks like on a web page:
  

  And here is the same piece in the generated PDF file:
  

  This can be an aesthetic issue if your website background colors are very contrast. Just generate a PDF (see how below) and see if this is okay or too striking in your case.

A bottom line, I have experienced these restrictions. But in your case (your website theme, operation system, software) it may be not an issue.

After all, the conversion WEB – DOC – PDF gives you more freedom and requires not so much efforts (and it’s free).

Come on show me how to create PDF from a blog post your way!

1. Save your blog post to file from your browser

For example, in Google Chrome I press “Ctrl-S” and choose “Webpage, Complete” type. It saves not only HTML, but also images, CSS etc.

You can save published blog posts and pages as well as drafts in a preview mode. In case with saving drafts to as a complete web page, you can later (see the next section) delete the WordPress Administrator top panel from the file in the text editor (e.g. MS Word).

2. Open the saved web page in a text editor (MS Word) and edit it

It sounds simple. But in fact it’s the trickiest part of the whole method.

The sweet part is that you can remove anything from the file, add images, additional screenshots, fix alignment etc. And this is as easy as editing an ordinary MS Word document.

But the problem is that you are editing a web document (not a text document) and try to edit it with a text editor. So there may be some restrictions. For example these two issues appeared to be the most prominent for me:

• The elements created with a page builder or similar plugins may not display correctly (e.g. missing colors, wrong layout etc).

  For example, this is how a problematic section of my web page looks like in a browser (it’s fine):

  

  And this is how when it’s edited in MS Word:

  

  As you can see, the positions of the foto and the text are broken. What you can do about it? Either manually edit it in MS Word (alignment, fixing wrapping text) or simply replace the problematic part with a screenshot from a web page.

• I could not add a footer or a header to a document to display on each page.
  Well, I had just to cope with that. I could not find a way how to do it easily.

I also noticed that saving a file into MS Word format makes the editing easier.

If your website is totally built with a page builder or you are heavily using a similar plugin, then there may be too much editing for you. You need to see it yourself. Perhaps good using a PDF-generating plugin or converting webpage to PDF online is a better option for you.

3. Export the document from MS Word as PDF (and also save the file as .DOC or .DOCX as an editing backup file)

This is as simple as it sounds. Just export or save the edited document as a PDF file. And save the edited file in MS Word format so that you can edit it later if you need and as a backup up option if something goes wrong.

When exported, open the PDF file and check if the content looks good. Sometimes you will notice that something should be fixed. You may notice it in the final PDF file and not when editing it in the MS Word file because when exporting the document may look a little different.

By the way, if you see that something in PDF looks not okay, but in MS Word everything looks good, then re-open MS Word (and open MS Word file you are editing). This helps because MS Word handles editing HTML content and MS Word content differently. Also, changing “View” in MS Word from “Web Layout” to a normal editing mode can be easier for editing.

4. Put the PDF file on the server and avoid duplicate content

Actually, you can save the PDF file to the cloud storage like Google Drive. In this case the duplicate content is not the issue.

But if you want to have more control on the PDF files, you may want to put the PDF files onto your server. In this case you will need to make sure these files don’t compete in Search Engines with your original blog posts. You need to avoid duplicate content issue.

Here’s a small and easy tutorial how to do it.

4.1. Choose or create a folder to store your PDF files

1. Open a file manager on your hosting. You can use a FTP Client or a default file manager provided by your hosting. If you are using a hosting with a standard cPanel, you may use File Manager:
   

   File Manager in cPanel

2. Decide where you want to store your PDF files and upload the PDF file. For example, I created the custom folder (articlePDF) under the /public_html/shared/ folder:
    
   

   By the way, I know that this folder will be backed up by my backup solution. But WordPress backup plugins do not backup directories like that (i.e. not standard WordPress folders).

   If you are using a backup plugin and if you want your PDF files to be included in your website backups, you may want to create a folder for your PDF files inside wp-content folder (which should be backed up by a WP backup plugin).

   Or you can simply upload your PDF file through a standard WordPress Media Library option (like you do it with images). The PDF file will be saved somewhere in /wp-content/uploads/ folder. Disadvantage of this upload method is that your PDF files will be stored together with images and other WordPress uploads. Since I prefer more order in my files, I don’t want to use Media Library for storing the PDF files and I want a custom folder for that.

   Whatever place you choose for your PDF files, don’t forget to avoid duplicate content (see the next section how).

4.2. Protect your PDF files from being treated as duplicate content

Since your blog posts and PDF files have almost identical content, you want to make it safe from a SEO point of view. Blog posts are indexed better than PDF files, so you don’t want your PDF files to be listed in SERPs (search engine result pages). And the best way to do so is using X-Robots-Tag directives .

Don’t be afraid if you did not understand completely the information from the links I gave you in the passage above. Here’s what you need to do.

In short, you need to create an .htaccess file in the folder with your PDF files and put there a simple directive. Here’s how:

1. Make sure hidden files are displayed. In the cPanel’s File Manager you do it this way:
   

   Show hidden files in cPanel File Manager

2. Select the folder where your PDF files will be stored and create .htaccess file there. For example, in my case I created the file in the “/public_html/shared/articlePDF/” folder:
    
   

   If you decided to upload PDF files via standard WordPress Media Library option, then create the .htaccess file in the /wp-content/ folder.

3. Add the following directive to the created .htaccess file:

   <FilesMatch ".(doc|docx|pdf)$">
   Header set X-Robots-Tag "noindex, noarchive, nosnippet"
   </FilesMatch>
   

   It will let the search engines know that they should not take PDF, DOC and DOCX files in this folder (and child folders) into consideration when ranging your content in search results.

   I mentioned not just PDF, but also DOC and DOCX files in the directive just for your information. If you want to use other than PDF or DOC formats for your downloadables, just add the required file extensions similarly.

   If you don’t know whether you are running NGINX, then don’t worry. Just skip the following note. Those who are running NGINX do know about it.

   If you are running NGINX instead of Apache you need to include this directive in the server configuration instead:

   location ~* \.(doc|docx|pdf)$ {
       add_header  X-Robots-Tag "noindex, noarchive, nosnippet";
   }
   

    
   Here’s what your .htaccess file will contain:

   

   Now, the files you upload to the specified folder (and its child folders) will be ignored by search engines.

5. Add “Download” button to your blog post(s)

If you use a plugin which generates PDF out of your blog post(s), then you can use a “Download PDF” button added to your blog posts and pages automatically by that plugin.

Otherwise, you have multiple options how to let your website visitors download the PDF files (or other downloadable format you make). You can use whatever way you want. It can be a link, a button, a clickable image, a button created with a specialized plugin, a button created with a CSS, JS etc.

 
And if you want to let your visitors download PDFs freely, below I will give the two simplest examples of a “download” option – a link and a clickable image.

The easiest option is an ordinary link with a “download” option. When a user clicks it the specified file will be downloaded by a browser. For example, here’s the HTML code of a “download” link in my case:

<a href="https://researchasahobby.com/shared/articlePDF/0002_Hosting Performance Contest – April 2019 Roundup.pdf" download="" rel="nofollow noopener">Click here to download PDF</a>

Mind the path to where your PDF files are stored (in my case it is /shared/articlePDF/).

The “download” parameter in the code above specifies under which name the downloadable file will be saved. If you don’t specify the value for the “download” parameter (like in my example above), the file will be saved under its current name.

If you skip the “download” parameter at all, then the file will be not saved but will be opened in a browser.

The parameter rel=”nofollow noopener” is just a standard tweak for better SEO and security. Not a big deal though.

Another a bit more interesting option – a clickable image. Almost the same HTML code as above but instead of a text I use an image:

<a href="https://researchasahobby.com/shared/articlePDF/0002_Hosting Performance Contest – April 2019 Roundup.pdf" download="" rel="nofollow noopener"><img class="aligncenter size-full wp-image-6659" src="https://researchasahobby.com/wp-content/uploads/2019/04/download-pdf-button5_optim.png" alt="Download PDF" width="325" height="80" /></a>

You’ve got the idea.

6. Keep the MS Word file you created for possible further use

I’d also recommend keeping the created MS Word file somewhere for possible further use. You may need it for example when you decide to update the article. Editing existing MS Word file is easier than creating it from a blog post again.

Conclusion

Turning your blog post into a downloadable PDF is quite simple. But depending on what result you want to get it may require less or more actions. There is a number of ways to do it – from automatically generated PDF from your blog posts with a help of a plugin to a manually designing PDF from scratch.

In this tutorial I wanted to share a happy medium solution of making a PDF. This allows more freedom and control on what gets into the PDF file. But at the same time it requires some manual actions and a little bit editing.

For me it was the best way to generate PDF from my blog posts the way I wanted, at least for now. If this method works for you too, I will be glad to hear about it in the comments. Feel free to share your experience.

You can download a PDF version of this article (613 KB):

Share the knowledge...

Facebook

Twitter

Linkedin