{"id":2253,"date":"2020-11-19T06:08:48","date_gmt":"2020-11-19T06:08:48","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=2253"},"modified":"2024-07-17T05:09:31","modified_gmt":"2024-07-17T05:09:31","slug":"how-to-create-custom-404-page-in-nginx","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/","title":{"rendered":"How To Create Custom 404 Page in NGINX"},"content":{"rendered":"\n<p>By default, when NGINX cannot find a requested URL, it will respond with a 404: Page not found&#8217; message. It is neither intuitive nor user-friendly and can cause site visitors to leave your website abruptly. To overcome this problem, it is advisable to create custom 404 page and show it instead of the default HTML one. So users will know what they need to do when they encounter 404 response. <\/p>\n\n\n\n<p>NGINX allows you to configure custom 404 page for your website, which are automatically rendered in case a requested URL is not found on your website. This allows you to display intuitive next steps to your website visitors, when they are unable to find a page on your website. You can use these steps to configure custom error pages in NGINX, for various error codes such as 404, 403, 500, 502, etc. Here are the steps to create custom 404 page in NGINX.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#Why_Create_Custom_Error_Pages\" >Why Create Custom Error Pages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#What_is_Error_page_directive\" >What is Error_page directive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#How_To_Create_Custom_404_Page_in_NGINX\" >How To Create Custom 404 Page in NGINX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#1_Create_404_error_page\" >1. Create 404 error page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#2_Open_NGINX_configuration_file\" >2. Open NGINX configuration file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#3_Configure_Custom_404_error_page\" >3. Configure Custom 404 error page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#4_Restart_NGINX_Server\" >4. Restart NGINX Server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#Some_Points_to_Remember\" >Some Points to Remember<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Create_Custom_Error_Pages\"><\/span>Why Create Custom Error Pages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Typically, all web servers display plain HTML pages with terse messages in case of error responses such as 404, 405, 403, 500, etc. They are not user friendly and confuse the site visitors, leaving a bad user experience. Also, it reduces your search engine rankings.<\/p>\n\n\n\n<p>It would have been super if web servers could automatically redirect to another web page on error response codes. Unfortunately, this cannot be done since redirect involves a separate request from browser, which doesn&#8217;t happen in case it receives an error response in the first place. That is why we need to setup a custom page for error responses. You can do this in NGINX using error_page directive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Error_page_directive\"><\/span>What is Error_page directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Error_page directive basically specifies the URI that will be displayed in case of specific errors. Here is its syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page error_code(s) uri<\/pre>\n\n\n\n<p>Here is an example command to display error404.html URI for 404 error code.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page 404 \/error404.html<\/pre>\n\n\n\n<p>When NGINX encounters the specific error (e.g. 404), it will do an internal redirection to URI specified in error_page directive matching the error code, say, 404. In this case, the request method is changed to GET irrespective of what user requested originally. You can also include variables in the above URI error404.html. <\/p>\n\n\n\n<p>In the above case, the response code will still be 404. If you want to change it, you can do so with = operator. Here is an example to not only display error404.html page but also return 200 response code instead of 404.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page 404 =200 \/error404.html<\/pre>\n\n\n\n<p>In fact, you can serve same page for more than one error code by simply mentioning them one after the other. Here is an example to serve same page for error codes 403, 404, and 405.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page 403 404 405 \/error404.html<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_To_Create_Custom_404_Page_in_NGINX\"><\/span>How To Create Custom 404 Page in NGINX<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that we have a good understanding of error_page directive, here are the steps to create custom 404 page in NGINX. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Create_404_error_page\"><\/span>1. Create 404 error page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Create custom error file <em>error404.html<\/em> using text editor like vi editor, or a page builder like Squarespace, WordPress, or Wix, and place it in website root folder \/usr\/nginx\/share\/html. You can change the file name as per your requirement.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ sudo vi \/usr\/nginx\/share\/html\/error404.html<\/pre>\n\n\n\n<p>Add the following code to it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1 >Error 404&lt;\/h1><br>&lt;h2>PAGE NOT FOUND&lt;\/h2><br>&lt;p>Sorry, we're unable to find the requested page.&lt;\/p><br>&lt;p>Please click &lt;a href=\"\/\">here&lt;\/a> to go to our home page instead&lt;\/p><\/pre>\n\n\n\n<p>In the above page, we display the error message saying the requested URL is not available. We also instruct the user to click on the link to home page. This is very important. Most websites do not tell what users need to when they encounter a 4xx or 5xx error response. That only confuses site visitors. It is important to provide a simple and clear CTA (call to action) on your custom page so that users do not leave your website cluelessly.<\/p>\n\n\n\n<p>Also read : <a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-limit-download-speed-in-nginx\/\">How to Limit Download Speed in NGINX<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Open_NGINX_configuration_file\"><\/span>2. Open NGINX configuration file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open terminal and run the following command to open NGINX server configuration file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ sudo vi \/etc\/nginx\/nginx.conf<\/pre>\n\n\n\n<p>If you have configured separate virtual hosts for your website (e.g <em>www.example.com<\/em>), such as \/etc\/nginx\/sites-enabled\/website.conf then open its configuration with the following command<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ sudo vi&nbsp;\/etc\/nginx\/sites-enabled\/website.conf<\/pre>\n\n\n\n<p>Alternatively, you can also open the default virtual host configuration file.<\/p>\n\n\n\n<pre id=\"block-d47a260a-a7b7-47b1-8b8d-d4e8e0c49519\" class=\"wp-block-preformatted\">$ sudo vi&nbsp;\/etc\/nginx\/sites-enabled\/default<\/pre>\n\n\n\n<p>Also read : <a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-enable-nginx-gzip-compression\/\">How to Enable GZIP compression in NGINX<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Configure_Custom_404_error_page\"><\/span>3. Configure Custom 404 error page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will add the <em><a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#error_page\" target=\"_blank\" rel=\"noreferrer noopener\">error_page<\/a><\/em> directive to configure custom error page for 404 response code. You can place it in <code>http<\/code>,\u00a0<code>server<\/code>,\u00a0<code>location<\/code>,\u00a0or <code>if<\/code> server blocks. If you place it in http block, then the same page will be displayed for all websites running on your server. If you place it in server block, it will be displayed only for the website of that server block.<\/p>\n\n\n\n<p>Add the following line to your server block<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">server {<br>   ...<br>     error_page 404 \/error404.html;<br>     location = \/error404.html {<br>          root \/usr\/share\/nginx\/html;<br>          internal; <br>      }<br>   ...<br>}<\/pre>\n\n\n\n<p>In the above code, we specify error_page directive followed by error code followed by error404.html page to be served. We also mention the location path to error404.html with its root directory as \/usr\/share\/nginx\/html so that NGINX can properly find this file. This way NGINX will render error404.html page instead of returning 404:Page not found error response.<\/p>\n\n\n\n<p>If you want to also serve the same page for other error codes such as 403 mention it after error_page directive before the filename to be served.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page <strong>403<\/strong> 404 \/error404.html;<br>     location = \/error404.html {<br>          root \/usr\/share\/nginx\/html;<br>          internal; <br>      }<\/pre>\n\n\n\n<p>You can create similar web pages to serve other error codes. Here is an example to serve error5xx.html for error codes 500, 502, 503, 504.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">error_page <strong>500 502 503 504<\/strong> \/error5xx.html;<br>     location = \/error5xx.html {<br>          root \/usr\/share\/nginx\/html;<br>          internal; <br>      }<\/pre>\n\n\n\n<p>Also read : <a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-enable-leverage-browser-caching-in-nginx\/\">How to Enable Caching in NGINX<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Restart_NGINX_Server\"><\/span>4. Restart NGINX Server<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Run the following command to check syntax of your updated config file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ sudo nginx -t<\/pre>\n\n\n\n<p>If there are no errors, run the following command to restart NGINX server.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ sudo service nginx reload #debian\/ubuntu<br>$ systemctl restart nginx #redhat\/centos<\/pre>\n\n\n\n<p>That&#8217;s it. Now NGINX will automatically return your custom error page for 404 page not found errors. Similarly, you can configure custom error pages for other error codes such as 403, 500, 502, etc. by changing error code number and response URL in <em>error_page<\/em> directive. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Points_to_Remember\"><\/span>Some Points to Remember<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you design a web page for 404 response code or any other error response, keep in mind the following points.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Design the web page to be similar to other pages on your website. It means use the same logo, header, footer, theme and visual elements of other pages. This way the visitor is not put off and knows that they are still on the same site.<\/li>\n\n\n\n<li>Mention clear call to action or next steps the visitor needs to take to get out of this problem. This can be clicking a link, sending an email, or contacting site admin.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt how to serve a custom web page for 404 error response code. You can use the same steps to setup error pages for other response codes. It is important to setup such pages to avoid displaying default HTML pages that are not helpful. This not only improves user experience but also prevents search engines from penalizing your site unnecessarily.<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/\">Ubiq<\/a>\u00a0makes it easy to visualize data, and monitor them in real-time dashboards.\u00a0<a href=\"https:\/\/ubiq.co\/accounts\/register\">Try Ubiq<\/a>\u00a0for free.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.<\/p>\n","protected":false},"author":1,"featured_media":2269,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[229],"class_list":["post-2253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nginx","tag-custom-404-page"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Create Custom 404 Page in NGINX - Ubiq BI<\/title>\n<meta name=\"description\" content=\"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Custom 404 Page in NGINX - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-19T06:08:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-17T05:09:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"937\" \/>\n\t<meta property=\"og:image:height\" content=\"599\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How To Create Custom 404 Page in NGINX\",\"datePublished\":\"2020-11-19T06:08:48+00:00\",\"dateModified\":\"2024-07-17T05:09:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\"},\"wordCount\":1117,\"image\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1\",\"keywords\":[\"custom 404 page\"],\"articleSection\":[\"Nginx\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\",\"url\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\",\"name\":\"How To Create Custom 404 Page in NGINX - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1\",\"datePublished\":\"2020-11-19T06:08:48+00:00\",\"dateModified\":\"2024-07-17T05:09:31+00:00\",\"author\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.\",\"breadcrumb\":{\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1\",\"width\":937,\"height\":599,\"caption\":\"configure custom 404 page in nginx\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ubiq.co\/tech-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create Custom 404 Page in NGINX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#website\",\"url\":\"https:\/\/ubiq.co\/tech-blog\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/\"],\"url\":\"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create Custom 404 Page in NGINX - Ubiq BI","description":"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Custom 404 Page in NGINX - Ubiq BI","og_description":"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2020-11-19T06:08:48+00:00","article_modified_time":"2024-07-17T05:09:31+00:00","og_image":[{"width":937,"height":599,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png","type":"image\/png"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How To Create Custom 404 Page in NGINX","datePublished":"2020-11-19T06:08:48+00:00","dateModified":"2024-07-17T05:09:31+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/"},"wordCount":1117,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1","keywords":["custom 404 page"],"articleSection":["Nginx"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/","name":"How To Create Custom 404 Page in NGINX - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1","datePublished":"2020-11-19T06:08:48+00:00","dateModified":"2024-07-17T05:09:31+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"NGINX allows you to configure custom 404 pages for your website. Here is how to create custom 404 page in NGINX.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1","width":937,"height":599,"caption":"configure custom 404 page in nginx"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-create-custom-404-page-in-nginx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How To Create Custom 404 Page in NGINX"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2020\/11\/nginx-custom-404-page.png?fit=937%2C599&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-Al","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/2253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=2253"}],"version-history":[{"count":25,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/2253\/revisions"}],"predecessor-version":[{"id":3694,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/2253\/revisions\/3694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/2269"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=2253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=2253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=2253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}