Printable Version of Topic

Posted by: pixie.susan Apr 5 2024, 11:06 AM

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

Posted by: Christian J Apr 5 2024, 03:45 PM

QUOTE(pixie.susan @ Apr 5 2024, 06:06 PM)

Posted by: pixie.susan Apr 6 2024, 10:07 AM

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

QUOTE(Christian J @ Apr 5 2024, 04:45 PM)

QUOTE(pixie.susan @ Apr 5 2024, 06:06 PM)

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/2009/02/specify-your-canonical
https://developers.google.com/search/blog/2009/12/handling-legitimate-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/Web/CSS/Alternative_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-css-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.

Posted by: Christian J Apr 6 2024, 11:32 AM

QUOTE(pixie.susan @ Apr 6 2024, 05:07 PM)

Posted by: coothead Apr 6 2024, 01:55 PM

QUOTE(Christian J @ Apr 6 2024, 05:32 PM)

https://forums.htmlhelp.com/index.php?showuser=28719 has suggested that this..

CODE

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

...is recommended.

Posted by: Christian J Apr 6 2024, 02:17 PM

QUOTE(coothead @ Apr 6 2024, 08:55 PM)

QUOTE(Christian J @ Apr 6 2024, 05:32 PM)

Sometimes that can be fixed simply by inserting this:

CODE

<meta name="viewport" content="width=device-width">

in the page's HEAD section.

https://forums.htmlhelp.com/index.php?showuser=28719 has suggested that this..

CODE

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

...is recommended.

coothead

Posted by: coothead Apr 6 2024, 03:01 PM

QUOTE(Christian J @ Apr 6 2024, 08:17 PM)

Where

In all his HTML coding.

Why

I am sure, if you ask him nicely, that he will be able
to give you concise reasoning for his assertion.

Posted by: Christian J Apr 6 2024, 05:44 PM

QUOTE(coothead @ Apr 6 2024, 10:01 PM)

QUOTE(Christian J @ Apr 6 2024, 08:17 PM)

Where, and why?

Where

In all his HTML coding.

Why

I am sure, if you ask him nicely, that he will be able
to give you concise reasoning for his assertion.

coothead

Posted by: coothead Apr 6 2024, 06:21 PM

QUOTE(Christian J @ Apr 6 2024, 11:44 PM)

I did read somewhere his reasons for his version, but cannot remember
where exactly he posted it.

My guess is that it may be found somewhere in the depths of his forum...

https://forums.cutcodedown.com/

Of course, with a little bit of luck, he may cast his optics over this thread
and then, if he sees fit, provide us with some simple elucidation.

Posted by: pixie.susan Apr 7 2024, 10:16 AM

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

Posted by: coothead Apr 7 2024, 02:29 PM

Hi there pixie.susan,

You have not given us either a link to, or the relevant HTML and CSS for, your desktop web page.

My guess is that you do not need another page for mobile devices.

Why are you so reluctant to supply the information that could help us to help you?

Posted by: Christian J Apr 7 2024, 04:33 PM

QUOTE(pixie.susan @ Apr 7 2024, 05:16 PM)

Wow, I thought this would be a simple, easy answer, something a beginner could understand.

Posted by: pixie.susan Apr 8 2024, 09:04 AM

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.

QUOTE(Christian J @ Apr 7 2024, 05:33 PM)

QUOTE(pixie.susan @ Apr 7 2024, 05:16 PM)

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/Web/HTML/Attributes/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.

Posted by: Christian J Apr 8 2024, 01:30 PM

QUOTE(pixie.susan @ Apr 8 2024, 04:04 PM)

Posted by: Christian J Apr 8 2024, 01:34 PM

QUOTE(pixie.susan @ Apr 6 2024, 05:07 PM)

Posted by: pixie.susan Apr 8 2024, 03:42 PM

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

QUOTE(Christian J @ Apr 8 2024, 02:34 PM)

QUOTE(pixie.susan @ Apr 6 2024, 05:07 PM)

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.

Posted by: coothead Apr 8 2024, 07:28 PM

Hi there pixie.susan,

You may find this reworking of your index.html page mildly interesting.
It is fully responsive and requires no javascript.

 pixie_susan.zip ( 162.73k ) Number of downloads: 90

Posted by: pixie.susan Apr 9 2024, 10:00 AM

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.

QUOTE(coothead @ Apr 8 2024, 08:28 PM)

Posted by: coothead Apr 11 2024, 06:24 PM

Hi there pixie.susan,

I had a spare moment or two so I thought that I would recode your whole site
to make it fully responsive right down to an "iPhone 5 -320 x 568".

If you want to test it out, let me know and I will pop the site into a zip file for
you to fully test.

One thing you will notice is the HTML that I have used is much simpler than yours
for example...

index.html

CODE

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Skydive on Cape Cod | Skydive the Mills</title>
        <script src="ew_js/mobileRedirect.js"></script>
        <script>
            redirectURL("/mobile.html");
        </script>
        <link rel="alternate" media="only screen and (max-width: 700px)" href="/mobile.html" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=1100" />
        <meta name="keywords" content="tandem skydiving,skydiving center,Cape Cod drop zone,Skydive on Cape Cod" />
        <meta name="description" content="Experience the thrill of tandem skydiving at Skydive the Mills! Skydive on Cape Cod just an hour from Boston, enjoy stunning views and friendly, certified skydive instructors." />
        <meta property="og:description" content="Experience the thrill of tandem skydiving at Skydive the Mills! Skydive on Cape Cod just an hour from Boston, enjoy stunning views and friendly, certified skydive instructors." />
        <meta name="generator" content="EverWeb 4.1.0 (2919)" />
        <meta name="buildDate" content="Sunday, April 7, 2024" />
        <link rel="canonical" href="http://www.skydivethemills.com/" />
        <meta property="og:url" content="http://www.skydivethemills.com/" />
        <meta property="og:title" content="Skydive on Cape Cod | Skydive the Mills" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="http://www.skydivethemills.com/ewExternalFiles/Sky%20Dive%20the%20Mills%20-%201.png" />
        <link rel="stylesheet" href="ew_css/textstyles.css?3795357411" />
        <link rel="stylesheet" href="ew_css/responsive.css?3795357411" />
        <link rel="stylesheet" href="ew_css/globaltextstyles.css?3795357411" />
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito:400,900,600&display=swap" />
        <link rel="stylesheet" href="ew_css/master/pagestyle.css?3795343012" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="canonical" href="http://skydivethemills.com/" />
        <style>
            div.container {
                min-height: 1269px;
            }
            .shape_7 {
                box-shadow: 5px 4px 3px 0px rgba(169, 169, 169, 0.75);
            }
        </style>
    </head>
    <body>
        <div class="container" style="height: 1269px;">
            <header>
                <div style="position: relative;">
                    <a href="index.html" data-linkuuid="E1D335FD10754772A5D913053E23CAA1" class="outerlink">
                        <div class="shape_1" style="left: 112px; top: 19px; width: 309px; height: 59px; z-index: 1; position: absolute;">
                            <div class="paraWrap" style="padding: 0px 2.16px 0px 2.16px;">
                                <p class="para1"><span style="line-height: 49px;" class="Style2">Skydive the Mills</span></p>
                            </div>
                        </div>
                    </a>
                </div>
                <div style="position: relative;">
                    <div class="ewnavmenu" id="navmenu_menu0" style="left: 592.5px; top: 34.5px; height: 43px; width: 505px; z-index: 10003; position: absolute;">
                        <ul id="navigation_menu0">
                            <li><a class="main item0" href="index.html" data-linkuuid="E1D335FD10754772A5D913053E23CAA1">Home</a></li>
                            <li><a class="main item1" href="about.html" data-linkuuid="CF910F4B0001409C871E5E9BB2E6110A">About Us</a></li>
                            <li><a class="main item2" href="first.html" data-linkuuid="DD8F6B8E646847A6AAC040B697CE9D14">First Jump</a></li>
                            <li><a class="main item3" href="pricing.html" data-linkuuid="08A0510E0003488FACDCDCC0DB586387">Pricing</a></li>
                            <li><a class="main item4" href="faq.html" data-linkuuid="9BFF5BEBE18048878ED75F8A26F5D4A6">FAQ</a></li>
                            <li style="margin-right: 0px;" class="last"><a class="main item5" href="book.html" data-linkuuid="4A0667A0375342E7B1559913B174E2F5">Book Now</a></li>
                        </ul>
                    </div>
                </div>
                <div style="position: relative;">
                    <div class="shape_5" style="left: 194px; top: 75px; width: 125px; height: 54px; z-index: 5; position: absolute;">
                        <div class="paraWrap" style="padding: 0px 2.16px 0px 2.16px;">
                            <p class="para1">
                                <span style="line-height: 22px;" class="linkStyle_11"><a href="tel:5086815286" class="linkStyle_11">508-681-5286</a></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div style="position: relative;">
                    <div class="shape_6" style="left: 6px; top: 6px; width: 101px; height: 101px; z-index: 6; position: absolute;">
                        <picture>
                            <source srcset="masterfiles/master/images/logosd.webp 1x, masterfiles/master/images/logosd@2x.webp 2x" type="image/webp" />
                            <img src="masterfiles/master/images/logosd.png" height="101" width="101" alt="Skydive the Mills logo" srcset="masterfiles/master/images/logosd.png 1x, masterfiles/master/images/logosd@2x.png 2x" />
                        </picture>
                    </div>
                </div>
            </header>
            <div class="shape_0" style="left: 0; top: 0px; width: 100%; min-width: 1100px; min-height: 108px; z-index: 0; position: absolute;"></div>
            <div class="shape_2" style="left: 0; top: 1181px; width: 100%; min-width: 1100px; min-height: 88px; z-index: 2; position: absolute;"></div>
            <div class="content" data-minheight="900">
                <div style="position: relative;">
                    <div class="shape_7" style="left: 0px; top: 129px; width: 1101px; height: 713px; z-index: 7; position: absolute;">
                        <picture>
                            <source srcset="images/index/hero.webp" type="image/webp" />
                            <img src="images/index/hero.JPG" height="713" width="1101" alt="skydiver having fun" />
                        </picture>
                    </div>
                </div>
                <div style="position: relative;">
                    <div class="shape_8" style="left: 15px; top: 857px; width: 879px; height: 59px; z-index: 8; position: absolute;">
                        <div class="paraWrap" style="padding: 0px 2.16px 0px 2.16px;">
                            <h1 class="para1"><span style="line-height: 49px;" class="Style14">Booking Tandem Skydiving for Summer 2024!</span></h1>
                        </div>
                    </div>
                </div>
                <div style="position: relative;">
                    <a href="https://book.peek.com/s/d1bf31f1-3602-4676-a4f9-20ee71f5e195/dzLYq" target="_blank" class="outerlink">
                        <div class="shape_9" style="left: 37px; top: 303px; width: 160px; height: 160px; z-index: 9; position: absolute;">
                            <picture>
                                <source srcset="images/index/gift2024 - 2.webp" type="image/webp" />
                                <img src="images/index/gift2024 - 2.png" height="160" width="160" alt="Click here to book a skydive" />
                            </picture>
                        </div>
                    </a>
                </div>
                <div style="position: relative;">
                    <div class="shape_10" style="left: 50px; top: 919px; width: 970px; height: 261px; z-index: 10; position: absolute;">
                        <div class="paraWrap" style="padding: 0px 2.16px 0px 2.16px;">
                            <p class="para15">
                                <span style="line-height: 22px;" class="Style16">
                                    Have you always wanted to skydive? Take a leap and jump with us! We specialize in tandem skydives and first time jumpers. You'll get a world class skydive experience here. Our instructors and staff are
                                    professionals, USPA certified, very friendly, and come back every year.
                                </span>
                            </p>
                            <p class="para15">
                                <span style="line-height: 22px;" class="Style16">
                                    Skydive the Mills, located at historic Cape Cod Airfield, is a short, one hour drive from Boston, MA and Providence, RI. Our drop zone offers spectacular views of Cape Cod, the Islands, and the Boston
                                    skyline.
                                </span>
                            </p>
                            <p class="para15">
                                <span style="line-height: 22px;" class="Style16">
                                    Bring your family and friends out to the airfield and make a day of your adventure. Everyone, even non-jumpers, will have a great time. After your jump you can hit the beach, try one of the Cape's great
                                    seafood restaurants, or check out the nightlife in town.
                                </span>
                            </p>
                            <p class="para15"><span style="line-height: 22px;" class="Style16">Find out why Skydive the Mills is the #1 choice for tandem skydiving in Massachusetts.</span></p>
                            <p style="font-size: 0; text-align: left; padding-bottom: 7px; margin-top: 0px; padding-top: 0px;" class="Style17">
                                <span style="line-height: 22px;"><br /></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <footer data-top="1179" data-height="90">
                <div style="position: relative;">
                    <div class="shape_4" style="left: 0px; top: 1208px; width: 1100px; height: 33px; z-index: 4; position: absolute;">
                        <div class="paraWrap" style="padding: 0px 2.16px 0px 2.16px;">
                            <p class="para3">
                                <span style="line-height: 19px;" class="Style4">
                                    Skydive the Mills         At Cape Cod Airfield         1000 Race
                                    Lane         Marstons Mills, MA 02648         
                                </span>
                                <span style="line-height: 19px;" class="linkStyle_5"><a href="tel:5086815286" class="linkStyle_5">508-681-5286</a></span>
                                <span style="line-height: 19px;" class="Style4">         </span>
                                <span style="line-height: 19px;" class="linkStyle_8"><a href="mailto:info@skydivethemills.com?subject=Skydiving" class="linkStyle_8">info@skydivethemills.com</a></span>
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <!-- Default Statcounter code for Skydivethemills
http://www.skydivethemills.com/ -->
        <script type="text/javascript">
            var sc_project = 11984171;
            var sc_invisible = 0;
            var sc_security = "68712744";
        </script>
        <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
        <noscript>
            <div class="statcounter">
                <a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/11984171/0/68712744/1/" alt="Web Analytics" /></a>
            </div>
        </noscript>
        <!-- End of Statcounter Code -->
    </body>
</html>