canonical URL, trying to figure this out! |
canonical URL, trying to figure this out! |
pixie.susan |
Apr 5 2024, 11:06 AM
Post
#1
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
First, I want to say I'm mostly a beginner at making a website. I know I should have a responsive site, but right now, I don't. I'm working on my first one, but I want to do this in the meantime: Use a canonical tag to tell Google that I have identical desktop and mobile versions of a six-page website.
I've Googled this endlessly today, and I can't tell who knows what they are talking about because I have found the complete opposite information on different websites of what tag goes where (and the tags they are recommending look different, too). Here is what I understand. I need to tell Google that one site is the main site and that I have duplicate pages for the mobile site What I can't figure out: 1) Which tags go on the main site, and which go on the mobile version? 2) What those tags should look like? Right now, it's my understanding that this tag should go on the desktop/main version: <link rel="canonical" href="https://mysite.com/index.html" /> <link rel="alternate" media="only screen and (max-width: 640px)" href="http://mysite.com/mobile.html"> But another site tells me I should have this on the main/desktop page: <link rel="canonical" href="https://www.mysite.com/index.html" /> <Link rel="alternate" href="https: //m.example.com/mobile.html" /> And some say to put this on the mobile page: <linkrel="canonical"href="https: www.mysite.com/index.html"></linkrel> (different tags: <link rel= and <inkrel= does it make a difference?) Can someone help me and let me know what goes where in simple language? I do understand that I need to do this on all 6 pages and I would of course change the URLs depending on the page name. Many thanks for any help. Susan |
Christian J |
Apr 5 2024, 03:45 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
First, I want to say I'm mostly a beginner at making a website. I know I should have a responsive site, but right now, I don't. I'm working on my first one, but I want to do this in the meantime: Use a canonical tag to tell Google that I have identical desktop and mobile versions of a six-page website. Basic web pages normally work on both desktop and mobile by default, so if you don't use any complicated CSS layouts (or things like wide HTML tables) a single HTML version should be enough. Responsive stylesheets (CSS) are not more difficult than any CSS layout that might warrant their use. QUOTE 1) Which tags go on the main site, and which go on the mobile version? That's up to you, which one you want to be the preferred version. QUOTE 2) What those tags should look like? Right now, it's my understanding that this tag should go on the desktop/main version: <link rel="canonical" href="https://mysite.com/index.html" /> Seems correct, if you want that URL to be the preferred one. That's all there is to it, really. (As a side note, it's more efficient to leave out the "index.html" part of URL's, see https://webtips.dan.info/subdir.html section Default Index Files.) Here's some more reading, if you want to delve deeper: https://en.wikipedia.org/wiki/Canonical_link_element https://developers.google.com/search/blog/2...-your-canonical https://developers.google.com/search/blog/2...te-cross-domain https://www.rfc-editor.org/rfc/rfc6596 QUOTE <link rel="alternate" media="only screen and (max-width: 640px)" href="http://mysite.com/mobile.html"> That seems like a mixup: The LINK element's ALTERNATE attribute is used to suggest alternate stylesheets to the same page, that the user can actively choose, like these: https://developer.mozilla.org/en-US/docs/We...ve_style_sheets --not to suggest different HTML pages to mobile and desktop browsers. Media Queries are used to specify different stylesheets (CSS) for the same HTML page, depending on the properties of the browser, but they are normally used in the CSS itself: https://css-tricks.com/a-complete-guide-to-...-media-queries/ QUOTE And some say to put this on the mobile page: <linkrel="canonical"href="https: www.mysite.com/index.html"></linkrel> (different tags: <link rel= and <inkrel= does it make a difference?) That seems incorrect, there's no LINKREL element in the W3C spec. |
pixie.susan |
Apr 6 2024, 10:07 AM
Post
#3
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
Thanks for your reply. The problem is if I just have a desktop version (it's not WordPress; it's built with Everweb), then the mobile version requires scrolling not only up and down but also right and left. No one wants to do that.
The problem is that Google Console says that we have duplicate pages, and right now, Google is only indexing the mobile page. Yes, we do have duplicates: a desktop home page and a mobile home page. Other than size they are the same. A desktop About page and a mobile About page. And so forth. So that's when I was told that I needed to add a canonical tag. I want the desktop version to be the main version. So on the desktop page I put this: <link rel="canonical" href="https://mysite.com/index.html" /> That's it - nothing else required? Susan First, I want to say I'm mostly a beginner at making a website. I know I should have a responsive site, but right now, I don't. I'm working on my first one, but I want to do this in the meantime: Use a canonical tag to tell Google that I have identical desktop and mobile versions of a six-page website. Basic web pages normally work on both desktop and mobile by default, so if you don't use any complicated CSS layouts (or things like wide HTML tables) a single HTML version should be enough. Responsive stylesheets (CSS) are not more difficult than any CSS layout that might warrant their use. QUOTE 1) Which tags go on the main site, and which go on the mobile version? That's up to you, which one you want to be the preferred version. QUOTE 2) What those tags should look like? Right now, it's my understanding that this tag should go on the desktop/main version: <link rel="canonical" href="https://mysite.com/index.html" /> Seems correct, if you want that URL to be the preferred one. That's all there is to it, really. (As a side note, it's more efficient to leave out the "index.html" part of URL's, see https://webtips.dan.info/subdir.html section Default Index Files.) Here's some more reading, if you want to delve deeper: https://en.wikipedia.org/wiki/Canonical_link_element https://developers.google.com/search/blog/2...-your-canonical https://developers.google.com/search/blog/2...te-cross-domain https://www.rfc-editor.org/rfc/rfc6596 QUOTE <link rel="alternate" media="only screen and (max-width: 640px)" href="http://mysite.com/mobile.html"> That seems like a mixup: The LINK element's ALTERNATE attribute is used to suggest alternate stylesheets to the same page, that the user can actively choose, like these: https://developer.mozilla.org/en-US/docs/We...ve_style_sheets --not to suggest different HTML pages to mobile and desktop browsers. Media Queries are used to specify different stylesheets (CSS) for the same HTML page, depending on the properties of the browser, but they are normally used in the CSS itself: https://css-tricks.com/a-complete-guide-to-...-media-queries/ QUOTE And some say to put this on the mobile page: <linkrel="canonical"href="https: www.mysite.com/index.html"></linkrel> (different tags: <link rel= and <inkrel= does it make a difference?) That seems incorrect, there's no LINKREL element in the W3C spec. |
Christian J |
Apr 6 2024, 11:32 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
Thanks for your reply. The problem is if I just have a desktop version (it's not WordPress; it's built with Everweb), then the mobile version requires scrolling not only up and down but also right and left. No one wants to do that. Sometimes that can be fixed simply by inserting this: CODE <meta name="viewport" content="width=device-width"> in the page's HEAD section. If that doesn't help, please post a link or sample code and we might be able to help. QUOTE I want the desktop version to be the main version. So on the desktop page I put this: <link rel="canonical" href="https://mysite.com/index.html" /> That's it - nothing else required? If https://mysite.com/index.html is the URL of the desktop version, then yes (but leave out the index.html). Maybe you need the same code in the mobile version as well, not sure. It's still not a guarantee search engines will obey, apparently they just see it as a hint. |
coothead |
Apr 6 2024, 01:55 PM
Post
#5
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Apr 6 2024, 02:17 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
coothead Where, and why? |
coothead |
Apr 6 2024, 03:01 PM
Post
#7
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
|
Christian J |
Apr 6 2024, 05:44 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
Where, and why?
coothead I was hoping you already knew. I learned about CODE <meta name="viewport" content="width=device-width"> from quirksmode.org, and it seems to do the trick, but I don't think I've ever known the effects of all its various CONTENT values, or why others suggest different ones. |
coothead |
Apr 6 2024, 06:21 PM
Post
#9
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
pixie.susan |
Apr 7 2024, 10:16 AM
Post
#10
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
Wow, I thought this would be a simple, easy answer, something a beginner could understand.
1) I keep getting different answers, and I guess I want to know, if I screw this up and Google indexes my website and sees it screwed up do they put me at the bottom of the search forever, or can I just go in a fix it and try again? 2) 12 to 8, I've been told this (from this forum and via web designers I know): This should be on every Desktop page: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="canonical" href="http://MyWebSite.com" /> And this should be on every mobile page: <link rel="alternate" href="http://example.com/desktop/page" media="only screen and (max-width: 640px)"> <meta name="viewport" content="width=device-width, initial-scale=1"> Is that correct? Again so what happens with Google if I screw it up? Thanks for putting up with me. Susan |
coothead |
Apr 7 2024, 02:29 PM
Post
#11
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there pixie.susan,
coothead |
Christian J |
Apr 7 2024, 04:33 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
Wow, I thought this would be a simple, easy answer, something a beginner could understand. It is, never mind our little digressions. QUOTE 1) I keep getting different answers, and I guess I want to know, if I screw this up and Google indexes my website and sees it screwed up do they put me at the bottom of the search forever, or can I just go in a fix it and try again? I'm sure it wouldn't cause any permanent harm. QUOTE 12 to 8 What't that? QUOTE This should be on every Desktop page: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="canonical" href="http://MyWebSite.com" /> Seems OK. QUOTE And this should be on every mobile page: <link rel="alternate" href="http://example.com/desktop/page" media="only screen and (max-width: 640px)"> No, Media Queries like the CODE media="only screen and (max-width: 640px)" above are only meant for stylesheet rules, they can't be used to redirect the browser to a different URL. To amend my previous reply, REL=ALTERNATE isn't used for stylesheets only; but also for various other alternative media as well, or translations: https://developer.mozilla.org/en-US/docs/We...s/rel#alternate but then other attributes like TYPE should be used as well. And again, I don't think it's meant for mobile page versions. QUOTE <meta name="viewport" content="width=device-width, initial-scale=1"> That one can be used on both desktop and mobile pages. I may not actually have any effect in a desktop browser though, but could still be useful in case someone ends of up the desktop page version with a mobile browser... QUOTE Again so what happens with Google if I screw it up? Worst thing that could happen might be that Google keeps linking to just one of the two page versions. |
pixie.susan |
Apr 8 2024, 09:04 AM
Post
#13
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
12 to 8 were the answers I got from others, 12 for one way, 8 for the other. Just making the point that, in part, that's why I'm confused, no one has said definitively: put this in the desktop head tags and put that in the mobile head tags.
That's what I need because what seems easy to you it Greek to me. Ok so you agreed with what I have on the desktop pages. If you go to the desktop site with a smaller screen it automatically redirects you to the mobile pages and they look great on everything I've tested them on. So, with that being the case, do I not need anything on the mobile pages at all? This is what is on the mobile now: <link rel="alternate" href="http://skydivethemills.com/mobile.html" media="only screen and (max-width: 640px)"> <meta name="viewport" content="width=device-width"> I'm sorry for being slow with this, but I'm just learning all this, and I am reading and watching all sorts of YouTube videos, but there is a lot to learn. Many thanks, really I can't thank you enough for how patient you are being. Susan. Wow, I thought this would be a simple, easy answer, something a beginner could understand. It is, never mind our little digressions. QUOTE 1) I keep getting different answers, and I guess I want to know, if I screw this up and Google indexes my website and sees it screwed up do they put me at the bottom of the search forever, or can I just go in a fix it and try again? I'm sure it wouldn't cause any permanent harm. QUOTE 12 to 8 What't that? QUOTE This should be on every Desktop page: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="canonical" href="http://MyWebSite.com" /> Seems OK. QUOTE And this should be on every mobile page: <link rel="alternate" href="http://example.com/desktop/page" media="only screen and (max-width: 640px)"> No, Media Queries like the CODE media="only screen and (max-width: 640px)" above are only meant for stylesheet rules, they can't be used to redirect the browser to a different URL. To amend my previous reply, REL=ALTERNATE isn't used for stylesheets only; but also for various other alternative media as well, or translations: https://developer.mozilla.org/en-US/docs/We...s/rel#alternate but then other attributes like TYPE should be used as well. And again, I don't think it's meant for mobile page versions. QUOTE <meta name="viewport" content="width=device-width, initial-scale=1"> That one can be used on both desktop and mobile pages. I may not actually have any effect in a desktop browser though, but could still be useful in case someone ends of up the desktop page version with a mobile browser... QUOTE Again so what happens with Google if I screw it up? Worst thing that could happen might be that Google keeps linking to just one of the two page versions. This post has been edited by pixie.susan: Apr 8 2024, 09:06 AM |
Christian J |
Apr 8 2024, 01:30 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
If you go to the desktop site with a smaller screen it automatically redirects you to the mobile pages and they look great on everything I've tested them on. Seems there's this javascript that may automatically redirect index.html to mobile.html: CODE <script src="ew_js/mobileRedirect.js"></script> <script>redirectURL('/mobile.html');</script> It shouldn't be impossible to make a single version for both desktop and mobile, but I only took a quick peek. QUOTE So, with that being the case, do I not need anything on the mobile pages at all? This is what is on the mobile now: <link rel="alternate" href="http://skydivethemills.com/mobile.html" media="only screen and (max-width: 640px)"> That LINK element doesn't have any effect. But keep this: CODE <meta name="viewport" content="width=device-width"> ...it's often needed to make the text content flow properly on mobile screens. QUOTE I am reading and watching all sorts of YouTube videos, but there is a lot to learn. Be careful with what you're reading/watching, there's a lot of incorrect information. Always try to use official/primary sources when possible. QUOTE Many thanks, really I can't thank you enough for how patient you are being. You're welcome! |
Christian J |
Apr 8 2024, 01:34 PM
Post
#15
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I want the desktop version to be the main version. So on the desktop page I put this: <link rel="canonical" href="https://mysite.com/index.html" /> This could theoretically be a problem, if Google detects the javascript that redirects to mobile.html. In practice? No idea, probably not. |
pixie.susan |
Apr 8 2024, 03:42 PM
Post
#16
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
It's always something and not always a simple, easy answer. I guess it probably is a Javescript that directs to the mobile page. It's not even so much that I want the desktop to be the canonical version, I know (well I think) that Google is mobile first, but I just want them to index all my pages, which they didn't before. I'm going to ask them via Google Console to reindex, and we'll see what happens. Susan I want the desktop version to be the main version. So on the desktop page I put this: <link rel="canonical" href="https://mysite.com/index.html" /> This could theoretically be a problem, if Google detects the javascript that redirects to mobile.html. In practice? No idea, probably not. |
coothead |
Apr 8 2024, 07:28 PM
Post
#17
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there pixie.susan,
coothead |
pixie.susan |
Apr 9 2024, 10:00 AM
Post
#18
|
Group: Members Posts: 6 Joined: 5-April 24 Member No.: 29,159 |
I'll take a look but with Everweb (which I think I mentioned I was using it for this) they do have a responsive option too, the problem is the "client" (my daughter and her husband) don't like how it looks when it shrinks to iPhone size. They want elements in a certain spot and when it is in mobile size some of those elements are not where they want them. With a separate mobile page, it looks great on almost every mobile phone that I've seen it on.
Hi there pixie.susan,
coothead |
coothead |
Apr 11 2024, 06:24 PM
Post
#19
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there pixie.susan,
coothead This post has been edited by coothead: Apr 11 2024, 06:26 PM |
Lo-Fi Version | Time is now: 25th September 2024 - 06:31 PM |