I have a website that uses country-specific pages. So for every page, there is a country-specific URL. For example: example.com/au/blog, example.com/us/blog, example.com/uk/blog. This is great as we can show content more relevant to each country.
This idea is the same for our home page: example.com/au, example.com/us, example.com/uk.
When a user goes to a non-country specific URL (ie example.com, example.com/blog) the server falls back to serving more generalised content. On the client, we then show a banner for the user to decide if they want to go to a country-specific page.
With this in mind, I have added the following meta tags and receiving the below error when testing using Lighthouse.
<link rel="canonical" href="https://www.example.com/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">
<link rel="alternate" hreflang="en-GB" href="https://www.example.comt/uk/">
<link rel="alternate" hreflang="en-US" href="https://www.example.com/us/">
<link rel="alternate" hreflang="en-AU" href="https://www.example.com/au/">
//error
The document does not have a valid rel=canonical. Points to the domain's root URL (the homepage), instead of an equivalent page of content.
Is this the correct way to inform crawlers that:
The site root is the original document
The site root doesn't target any language or locale
The alternatives to this page are en-GB, en-US and en-AU
If so, why does Lighthouse complain about this error on the home page? It doesn't complain about this on any other page.
I am new to canonicalisation and providing alternative lang pages so I might be missing something obvious.
Since your home page has a generalized subset of content, it is not canonical. (The canonical context IRI and target IRI shouldn't be the same or the user would already be on the canonical IRI.) Technically, the per language IRIs are canonical and alternate documents, depending on the language. Since you're in the UK, you should specify the en-GB IRI to be the canonical IRI and the others to be alternates (not "alternatives") since they are simply different representations of the same content therein.
From the home page https://www.example.com/ (the generalized content):
<link rel="canonical" hreflang="en-GB" href="https://www.example.com/uk/">
From https://www.example.comt/uk/ (the canonical IRI)
<link rel="alternate" hreflang="en-US" href="https://www.example.com/us/">
<link rel="alternate" hreflang="en-AU" href="https://www.example.com/au/">
https://www.rfc-editor.org/rfc/rfc6596
https://www.rfc-editor.org/rfc/rfc8288
https://html.spec.whatwg.org/#the-link-element
Related
Can I include canonical URLs in sitemaps for SEO?
For example www.example.com/url.html is a duplicate page of www.example2.com/url.html.
So I used following tag in www.example.com/url.html page for SEO not to be penalized by search engines:
<link rel="canonical" href="www.example2.com/url.html">
Now my question is can I display www.example.com/url.html URL inside of www.example.com/sitemap.xml?
I already display www.example2.com/url.html URL inside of www.example2.com/sitemap.xml.
Please suggest me what I have to do.
You can include these two pages into your sitemap.xml and there won't be a problem for SEO because you're using the rel="canonical" tag. Indeed, when web crawlers will try to index the duplicate page, they will see the rel="canonical" tag and they will index the second page (the good one).
For better index you must leave one URL - canonical URL in XML site map
In my layout page, I have:
<link href="~/Content/bootstrap.css" rel="stylesheet">
My understanding is that this should not be altered when it is sent to the client. However, when I set up the website as a virtual application under a "myapp" folder in IIS, the HTML is:
<link href="/myapp/Content/bootstrap.css" rel="stylesheet">
I'm a bit confused as I had thought I would need to change these URLs to:
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet">
in order for this to work correctly.
So do I need to use URL.Content to get the correct root URL of the app/website, or can I just put tildes into the actual HTML src + href elements, and assume it will be outputted correctly by IIS?
As of ASP.NET MVC version 4 (or actually Razor version 2), the tilde links are essentially shortcuts to Url.Content(..).
You actually answered your own question. Yes, you should use Url.Content() for your relative paths. A simple tilde in front of relative paths are only parsed in the client's browser,which treats all URL's under the http://www.foo.com/ as a single domain, so will try to look for resources at http://www.foo.com/ and not http://www.foo.com/myapp/.
I'm trying to pass LESS files over to a PHP compiler via mod_rewrite - when a LESS file is requested, the file should be redirected to the PHP script, passing it's path/name so a CSS file can be spat out.
HTML:
<link rel="stylesheet/less" type="text/css" href="styles/main.less" />
<link rel="stylesheet" type="text/css" href="styles/main.less.css" />
.htaccess:
RewriteEngine On
RewriteBase /v2/
RewriteRule ^([^.]*\.less)$ compilers/lessphp.php?file=$1 [R,L,NC]
Starting out, there is only a .less file.
Refreshing 'http://mydomain.com/v2/' will result in unstyled content. No .css file is created in /styles/.
If I go to 'http://mydomain.com/v2/styles/main.less' I'll be redirected to my PHP compiler 'http://mydomain.com/v2/compilers/lessphp.php?file=styles/main.less', and 'main.less.css' is created as it should within /styles/. Returning to 'http://mydomain.com/v2/', I now have styled content.
Rewrites are only occurring in the URL bar of the browser, not the page of the site.
What am I doing wrong?
EDIT: Is there also a better way to do what I am trying to do?
EDIT2:
/v2/
--index.php
--.htaccess
--/styles/
----main.less
----main.less.css
--/compilers/
----lessphp.php
What happens right now is your browser requests the second link before the compilation is finished and your web server returns 404 because the *.less.css file is not there yet.
A better way to do it would be to have your PHP script output the compilation result (e.g. actual CSS) as a response. Whether or not it also produces a *.less.css file is irrelevant, though you probably do want to cache your CSS output so LESS is not compiled on every request.
In other words:
<link rel="stylesheet/less" type="text/css" href="styles/main.less" /> redirects via mod_rewrite to compilers/lessphp.php?file=styles/mail.less
the above script returns the actual compiled CSS as HTTP response
the second <link> is no longer needed at all
OK, Figured out the issue. Dead simple really.
Playing around with altering extensions and what not, trying to figure out why images would change freely, yet CSS was not, when it struck me that it might have something to do with file type or what not. This is when I noticed the following
<link rel="stylesheet/less" type="text/css" href="styles/main.less" />
rel="stylesheet/less" is the culprit here, and is used by less.js for client side rendering. Replacing simply with rel="stylesheet" like a normal CSS document, Everything. Just. Worked.
Edit: I've written a run through to get Lessphp working properly here
I have a folder for all my css in my main folder called "main." In "main" I have another folder called "math." I would like to use my css in the "math" folder, but when I type:
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
on the index.html of the "math" folder it doenst work. I think it's because it's looking for the css folder inside of the math folder. How can i link to the css folder, which is not in the math folder?
If I am understanding, your directory structure is as follows:
siteroot
main
math
css
You are looking to link to a style sheet in /main/css from /main/math/index.html.
There are two solutions, the easiest is to use an absolute path:
<link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />
Absolute paths are a better solution and will cause less headache down the road. I do not know of any drawbacks, either.
Alternatively, you could use '..' to traverse up a directory
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
Use absolute path:
href="/main/css/..."
You must go up to the same directory as css and math using ../
So it would look like ../css/basic.css
If you Want To locate a file inside of that folder use this
<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />
and if you want to locate a file outside of that folder you could use this snippet
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
The answer also has some dependency on whether or not the site is being developed and tested locally or if your publishing your content to a web server and testing links on the Live Site.
If your href attribute's URL is using a Relative URL and has a domain name being mapped to your Document Root on a Live Site, the above answers are correct.
However, if your testing your links where all the files are on a local PC's file system where no web server is being used locally, then you might find the following information helpful too.
If you are testing locally, there is usually no domain associated with your Document Root and the pathing changes in a number of ways.
If you link to a file in any child directories, you will NOT have an initial slash ("/") in your href or in this case a src attribute because there is no domain and the Relative URL is relative to the current page. (The same rules apply to your href URLs as well)
Local testing URLS:
<img src="images/image-1.jpg" alt="my-Image-1">
..as opposed to a Relative URL on a page in a Live Site that has a domain name where you WOULD use an initial forward slash because it will be relative to the domain.
Remote Live Testing:
<img src="/images/image-1.jpg" alt="my-Image-1">
I am aware this is not the situation you ask about but it should help with the following two examples where the folders are adjacent and parent directories on a local file system. Your situation is that your Relative URL is to a file located in an adjacent directory. See below if your developing and testing locally.
For Relative URLs linking to your css stylesheet files in an adjacent directory or even links to files a parent directory above your current page on a local filesystem (usually without a domain), your href attribute URL pathing should use a double-dot-slash (../). So your situation (if testing locally without a domain) is:
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
...as indicated by #Cory Dolphin above.
I experienced this and found that my issue was that I kept finding different results depending on where I was testing and it was driving me mad.
I originally thought the pathing difference had to do with my local files being on my local Windows system and the reason it was slightly different was becuase of the file system of my remote Linux Apache VPS.
I found that it has more to do with whether it has a domain mapping to your site files or not. This is addressed somewhat in W3Schools.com's Page in the section that's titled The src Attribute and Relative URLs.
in the cover page (login, register...) of my app i have this line:
<link rel="stylesheet" type="text/css" href="/css/formularios.css">
When i deploy my app, the that css rule is not loaded because, as i can
see in Firebug, it's looking for that rules in
www.tirengarfio.com/css/formularios.css instead of
www.tiregarfio.com/rs2/web/css/formularios.css.
What should i do?
Javi
You should use the view.yml config file and the include_stylesheets() helper. However, if you'd like to create the link tags by hand, use the public_path() helper to get the correct path.