'Add link tag using only for homepage in bigcommerce

I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...

Tried code:

1: 

if ($("body#home").length > 0) {
  $('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}

2:

var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
  $('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}

3:

if ($("html").hasClass("home")) {
  $("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}

But nothing worked for me....

htmljquerycss


Solution 1:[1]

Let's first give some background on hreflang and the three valid ways that Google will read it..

  1. HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this: <link rel="alternate" hreflang="es" href="http://es.example.com/" />
  1. HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
    To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
  1. Sitemap. Instead of using markup, you can submit language version information in a Sitemap.

Source: Google 'hreflang' Usage

So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.

This leaves us with Method 1 or Method 3.

The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?

Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to:
Dashboard > Search Traffic > International Targeting.

But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...

Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" />
This will have the link element physically in the DOM awaiting its attributes to be dynamically added.

Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page: 

<script>
  // If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
  // If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />" 
  window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>

And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />

Again, whether or not Google will process this, I don't know.

But here's an alternative I do know will work...

We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.

Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:

  1. Create your own custom sitemap file, and upload it to your store.
  2. Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.

There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.

I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.

Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.

Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.

Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.

Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.

Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TylerH

Related Questions