I have a blog with Photoshop tutorials and because some of my tutorials are quite long I've decided to split the content into parts
http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx
http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=2
and set the canonical rel for both pages to
http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx
Is this better than the option of having 2 canonical links? Please note that I have images and text on both parts that I would like to have indexed.
It’s not allowed to use the canonical link type in that case.
RFC 6596 defines:
The target (canonical) IRI MUST identify content that is either duplicative or a superset of the content at the context (referring) IRI.
But your second page is not included in (or identical to) the first page.
So you have these options:
Introduce a page that contains the whole content, and make this one the canonical target for all paginated pages (but if you do this, you might want to consider to stop offering the paginated versions in the first place). Note that this is only allowed if the paginated pages don’t have separate user comments (or any other unique content).
Use self-referential canonical targets.
Omit canonical.
You can use canonical for pagination for solve that:
In the <head> section of the first page (www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx),
add a link tag pointing to the next page in the sequence, like this:
<link rel="canonical" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx">
<link rel="next" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=2">
Because this is the first URL in the sequence, there’s no need to add markup for rel="prev".
On the second and third pages, add links pointing to the previous and next URLs in the sequence. For example, you could add the following to the second page of the sequence:
<link rel="prev" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx">
<link rel="canonical" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=2">
<link rel="next" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=3">
On the final page of the sequence (www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=4>), add a link pointing to the previous URL, like this:
<link rel="prev" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=3">
<link rel="canonical" href="http://www.psd-dude.com/tutorials/how-to-make-a-coffee-stain-text-in-photoshop.aspx?part=4">
Because this is the final URL in the sequence, there’s no need to add a rel="next" link.
Related
I am experiencing an issue with setting canonical urls for my website. Moz crawler shows that each page is missing a canonical and when I inspect the page, the canonical is shown as follow:
<link rel=""canonical"" href=""https://website.com/"">
This goes for each webpage.
The website was built by a third party and the wait time for corrections is rather long. I've checked the CMS and the repository for errors, but nothing looks out of the ordinary. Any ideas?
edit: I should mention that I am aware of the extra quotes, but am unable to identify the error. Repository lists the following:
<link rel="canonical" href="{site_url}/{segment_1}/{segment_2}" />
To be valid it should look like so:
<link rel="canonical" href="https://website.com" />
It might be that the segments aren't set properly. Maybe they are set with something like freebie?
Anyway, the way it's set up now you will get some unwanted slashes if there are no url segments.. Maybe better to change this to something like <link rel="canonical" href="{site_url}/{if segment_1}{segment_1}/{/if}{if segment_2}{segment_2}/{/if}" />
Reading mode in Spartan/Edge seems to choose, somehow, which div on the site to display in reading mode. In many pages, it does not find the appropriate div (like bbc.co.uk).
However, on our site, it enables reading mode, but then displays the completely wrong part of the page.
So - how can I tell it to take the right part or at least how to disable it on those pages
You can find information on how to optimize reading view, as well as how to opt-out, here: http://dev.modern.ie/testdrive/demos/readingview/
07/10: Edit to include specific information
Specifically, you may be interested in optimizing your title, body, and image markup to ensure a good reading mode experience.
Title
Your page should include a <title> element in the header. In addition, you should include a <meta title=""> tag that matches your main heading in your content section.
Body text
Ensure your main content does not include a lot of deeply nested elements and that font-sizes and other styles are uniform. Style variations for things like pull quotes, etc. should still be fine.
Images
The first eligible image becomes the dominant image of the article. The dominant image is rendered as the first piece of content and given full column width. All following images are rendered as inline images within the article.
Images are recommended to be wrapped in <figure> tags with no more than two <figcaption> tags.
Opting out
Including this meta tag will disable reading mode in IE11 and, currently, Microsoft Edge.
<meta name="IE_RM_OFF" content="true">
Add the following Tag
<meta name="IE_RM_OFF" content="true">
Check the Below for more details
http://dev.modern.ie/testdrive/demos/readingview/
I've figured out how Mod rewrite works now however I've come across a new problem.
htaccess code
RewriteEngine On
RewriteRule ^([A-Za-z0-9-]+)/$ http://localhost/testblog/index.php?category=$1
I now know that this: localhost/testblog/dogs/
is equal to : localhost/testblog/index.php?category=dogs
however, when i put a link on the index.php file; Dogs that page (localhost/testblog/dogs/) now has the stylesheet prefixed with dogs/ so the stylesheet looks like localhost/testblog/dogs/stylesheets/style.css
but when I link with Dogs everything works just fine; localhost/testblog/stylesheets/style.css
I find it confusing because I thought that they now equaled the same thing using the .htaccess file?
how can i rectify this problem with the prefix?
Hopefully I've explained properly
Thanks
I think your issue is probably more the way you're linking the stylesheet. You're re-writing to /dogs/ and I'm guessing your stylesheet is linked like <link href="stylesheets/style.css" rel="stylesheet" type="text/css">. So when you point your browser at /dogs/ it's trying to load a stylesheet in relation to the URL, and it looks like /dogs/ is a folder so it's just appending stylesheets/style.css to your current URL. The best bet in my opinion would be to link absolutely to the stylesheet like: <link href="/testblog/stylesheets/style.css" rel="stylesheet" type="text/css">
Like said Jonathon, the browser compute relative link by appending the href to the url displayed on the adress bar.
To change this, you need to had a base tag
<base href="//localhost/testblog">
So, your browser will compute your link by adding your href to the base href.
i'm still new to the redirectrule thing from htaccess and have successfully redirected my pages so that the pretty URL shows up, but is there a way to redirect the images so that it is not relative? Is there a way or function that allows me to redirect images without changing it one by one ?
Like i after redirecting the page, i get relative URL, hence my images are showing something extra in their links.
so this is the actual url to the image
http://www.yousite.com/page/images/this.jpg
but i'm getting stuff like
http://www.yoursite.com/images/page/images/this.jpg
I am not sure this will solve the problem, but instead of modifying all the links you could use the BASE element in each page to define a base URI:
From http://www.w3.org/TR/html4/struct/links.html#h-12.4:
When present, the BASE element must appear in the HEAD section of an
HTML document, before any element that refers to an external source. The
path information specified by the BASE element only affects URIs in the
document where the element appears.
Examples:
<HEAD>
<BASE href="ImagesBasePath">
</HEAD>
Or just:
<HEAD>
<BASE href="/">
</HEAD>
I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a favicon.ico file in the root of the website.
I found this nice little guide: How to Add a Favicon. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).
Is there a third method that works across all the most popular browsers?
This is what I always use:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The second one is for IE. The first one is for other browsers.
You can use HTML to specify the favicon, but that will only work on pages that have this HTML. A better way to do this is by adding the following to your httpd.conf (Apache):
AddType image/x-icon .ico
I think the most reliable method is the simply added the favicon.ico file to the root of your website.
I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.
This is how they're doing it right here on Stack Overflow:
<link rel="shortcut icon" href="/favicon.ico" />
Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).
Edit: I'll try it and see if it works.
Edit 2: Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using .png files and it only worked with Firefox.
There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there's really no longer a simple answer. For a great explanation see this S.O. answer, but the short answer is:
Use this site which lets you upload a png/jpg and then does all the hard work for you: https://realfavicongenerator.net/