{"id":1023,"date":"2014-10-07T19:00:21","date_gmt":"2014-10-08T02:00:21","guid":{"rendered":"http:\/\/www.virendrachandak.com\/techtalk\/\/?p=1023"},"modified":"2016-12-28T12:08:44","modified_gmt":"2016-12-28T20:08:44","slug":"protocol-relative-urls","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","title":{"rendered":"Protocol relative URLs"},"content":{"rendered":"

Many times we have seen warnings similar to “This page contains both secure and nonsecure items” or “This page has insecure content.”. This happens when we are viewing a HTTPS site and some content on the site is loaded from HTTP. So when we try to view a site say https:\/\/www.example.com<\/code> and we get this warning, that means some content on the site is getting loaded from a non https site, like http:\/\/www.example.com<\/code>. These warning messages can be fixed by using protocol relative URLs.
\n<\/p>\n

What are protocol relative URLs?<\/h2>\n

A URL is usually similar to http:\/\/www.example.com\/css\/main.css<\/code> or https:\/\/www.example.com\/css\/main.css<\/code>. Both these URLs specify what protocol to be used (HTTP or HTTPS respectively). A protocol relative URL will be something similar to \/\/www.example.com\/css\/main.css<\/code>. In protocol relative URLs we do not specify the protocol which should be used to connect to the URL. When the protocol is not specified the browser uses the current protocol of the website. Hence, when you visit the site in HTTPS mode, the link will use HTTPS protocol and if you are using HTTP mode, it will take the HTTP protocol.<\/p>\n

When to use?<\/h2>\n

The protocol relative URLs can be used in following cases, so that the users don’t get warnings on HTTPS protocol for non HTTPS resources. Also, make sure the resources you are using in the page are served over both HTTP and HTTPS protocol. They can be used in HTML, CSS, or JavaScript.<\/p>\n

HTML<\/h5>\n
\r\n<img src="\/\/example.com\/images\/logo.png">\r\n<\/pre>\n
CSS<\/h5>\n
\r\n#logo { background: url(\/\/example.com\/images\/logo.png); }\r\n<\/pre>\n
JavaScript<\/h5>\n
\r\n<script src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js"><\/script>\r\n<\/pre>\n
When not to use?<\/h2>\n
They should not be used the following cases:<\/p>\n
Emails<\/h5>\n
Some email clients (e.g. Outlook) won’t try to use HTTP or HTTPs as the protocol, but will use the file:\/\/ protocol. the file:\/\/ protocol assumes that the resource referred is on the local machine, which won’t be the case.<\/p>\n
Links or Canonical URLs<\/h5>\n
If we use protocol relative URLs in these cases, they can cause duplicate content issues between the http and https versions of the website.<\/p>\n
Open Graph Tags<\/h5>\n
Open graph tags need absolute URLs with the protocol. If you have both http and https url you can used the secure_url<\/a> to the property.<\/p>\n
\r\n<meta property="og:image" content="http:\/\/example.com\/ogp.jpg" \/>\r\n<meta property="og:image:secure_url" content="https:\/\/secure.example.com\/ogp.jpg" \/>\r\n<\/pre>\n
If you have only https URLs then you can just use the https urls for the og:image property<\/p>\n
Conclusion<\/h2>\n
You should use protocol relative URLs for your CSS, JavaScript, custom fonts etc on your website if your site can be accessed from both http and https protocols. You should never use it for any of the resources in your emails, links, canonical URLs.<\/p>\n","protected":false},"excerpt":{"rendered":"
Many times we have seen warnings similar to “This page contains both secure and nonsecure items” or “This page has insecure content.”. This happens when we are viewing a HTTPS site and some content on the site is loaded from HTTP. So when we try to view a site say https:\/\/www.example.com and we get this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[8],"tags":[134,80],"class_list":["post-1023","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-protocol-relative-url","tag-web-design-and-development"],"yoast_head":"\nProtocol relative URLs - Virendra's TechTalk<\/title>\n<meta name=\"description\" content=\"What are Protocol relative URLs, how, when and when not to use them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Protocol relative URLs - Virendra's TechTalk\" \/>\n<meta property=\"og:description\" content=\"What are Protocol relative URLs, how, when and when not to use them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/\" \/>\n<meta property=\"og:site_name\" content=\"Virendra's TechTalk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-08T02:00:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-28T20:08:44+00:00\" \/>\n<meta name=\"author\" content=\"Virendra Chandak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:site\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Virendra Chandak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/\"},\"author\":{\"name\":\"Virendra Chandak\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"headline\":\"Protocol relative URLs\",\"datePublished\":\"2014-10-08T02:00:21+00:00\",\"dateModified\":\"2016-12-28T20:08:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/\"},\"wordCount\":496,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"keywords\":[\"protocol relative URL\",\"Web Design and Development\"],\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/\",\"name\":\"Protocol relative URLs - Virendra's TechTalk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\"},\"datePublished\":\"2014-10-08T02:00:21+00:00\",\"dateModified\":\"2016-12-28T20:08:44+00:00\",\"description\":\"What are Protocol relative URLs, how, when and when not to use them.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/protocol-relative-urls\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TechTalk\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/category\\\/web-development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Protocol relative URLs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\",\"name\":\"Virendra's TechTalk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\",\"name\":\"Virendra Chandak\",\"logo\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.virendrachandak.com\",\"https:\\\/\\\/www.facebook.com\\\/virendrachandak\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/virendrachandak\\\/\",\"https:\\\/\\\/x.com\\\/virendrachandak\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Protocol relative URLs - Virendra's TechTalk","description":"What are Protocol relative URLs, how, when and when not to use them.","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:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","og_locale":"en_US","og_type":"article","og_title":"Protocol relative URLs - Virendra's TechTalk","og_description":"What are Protocol relative URLs, how, when and when not to use them.","og_url":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","og_site_name":"Virendra's TechTalk","article_publisher":"https:\/\/www.facebook.com\/virendrachandak","article_author":"https:\/\/www.facebook.com\/virendrachandak","article_published_time":"2014-10-08T02:00:21+00:00","article_modified_time":"2016-12-28T20:08:44+00:00","author":"Virendra Chandak","twitter_card":"summary_large_image","twitter_creator":"@virendrachandak","twitter_site":"@virendrachandak","twitter_misc":{"Written by":"Virendra Chandak","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/#article","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/"},"author":{"name":"Virendra Chandak","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"headline":"Protocol relative URLs","datePublished":"2014-10-08T02:00:21+00:00","dateModified":"2016-12-28T20:08:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/"},"wordCount":496,"commentCount":3,"publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"keywords":["protocol relative URL","Web Design and Development"],"articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","url":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/","name":"Protocol relative URLs - Virendra's TechTalk","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website"},"datePublished":"2014-10-08T02:00:21+00:00","dateModified":"2016-12-28T20:08:44+00:00","description":"What are Protocol relative URLs, how, when and when not to use them.","breadcrumb":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.virendrachandak.com\/techtalk\/protocol-relative-urls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TechTalk","item":"https:\/\/www.virendrachandak.com\/techtalk\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.virendrachandak.com\/techtalk\/category\/web-development\/"},{"@type":"ListItem","position":3,"name":"Protocol relative URLs"}]},{"@type":"WebSite","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website","url":"https:\/\/www.virendrachandak.com\/techtalk\/","name":"Virendra's TechTalk","description":"","publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.virendrachandak.com\/techtalk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17","name":"Virendra Chandak","logo":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.virendrachandak.com","https:\/\/www.facebook.com\/virendrachandak","https:\/\/www.linkedin.com\/in\/virendrachandak\/","https:\/\/x.com\/virendrachandak"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2vTtQ-gv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/comments?post=1023"}],"version-history":[{"count":0,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/1023\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/categories?post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/tags?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}