I'm currently building a music based website and I want to build something like this template. It uses ajax and deep linking. (And it makes use of the History.js library - please notice how there's no '#' in the URLs.)
The reason I want to use these 'ajaxy' methods (or maybe use the template altogether) is so that when music is playing, it will remain un-interrupted as the user navigates the site.
My worry is that my site wont be crawlable by Google but I think I can modify code in the page source to fix that. If I look at the source code to the template, in the head I see
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
Now if I add this to the head:
<meta name="fragment" content="!">
will that make the site crawlable? Is there other code I need to add on top of this? Or is it just not possible for this template?
I'm following this guide https://developers.google.com/webmasters/ajax-crawling/docs/getting-started, and I'm on step 3. I will of course have to complete the other steps but I don't know I'm heading in the right direction, or heading towards a dead end!
Any help would be very much appreciated. Many thanks in advance.
From what you said it sounds like your site updates the address bar with clean urls as you navigate via ajax. That's good. The next thing is you want to do is make sure those urls work. If you directly go to a url do you see the specific content it represents. And would a crawler also see the correct content without running javascript. Progressive enhancement works well for that. The final thing is you want to do is make sure bots can pick up those urls.
I've not played with the meta tag for ! But it looks like it is only for the home page and you still need to implement the escaped fragment page. Maybe it does support other pages but the article does not cover that.
Related
I've read many tutorials, and edited the page correctly.I have all the meta tags that are needed to provide the right image to be picked after a like.
I also ran my site through the debug site, and there it shows the right texts and images. Only not when i try to like it, then i keep getting the wrong thumbnail.
How come?
http://www.verkeersschooltilburg.nl/proeflesfacebook/
<meta property="og:title" content="Gratis proefles!"/>
For right thumbnail to display, when you hit "Like" you must use:
<meta property="og:image" content="http://www.yourdomain.com/yourimage.jpg" />
Maybe it won't work instantly because of cache, try to clear browser cache and wait couple of moments..
When you share a link on facebook it will automatically find images on the website and randomly picks one as a preview. How can you influence the preview image? When a person shares the website link on his facebook?
1. Include the Open Graph XML namespace extension to your HTML declaration
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
2. Inside your <head></head> use the following meta tag to define the image you want to use
<meta property="og:image" content="fully_qualified_image_url_here" />
Read more about open graph protocol here.
After doing the above, use the Facebook "Object Debugger" if the image does not show up correctly. Also note the first time shared it still won't show up unless height and width are also specified, see Share on Facebook - Thumbnail not showing for the first time
Note also that if you have wordpress just scroll down to the bottom of the webpage when in edit mode, and select "featured image" (bottom right side of screen).
Years and years pass and this problem with the facebook cache has not yet been solved ...
Why doesn't facebook put a button to totally clear the cache in Debug Tools ???? How difficult is that?
OK ... Now the definitive solution:
Use this on "og:image"....: ?[sequentialNumber] example: ?1 / ?2 / ?3 .....
Example of use:
<meta property="og:image" content="http://example.com/image.jpg?1" />
Did you change the image? Add 1 to the number ...
<meta property="og:image" content="http://example.com/image.jpg?2" />
Each time the image is changed, add 1 to the number
This can be done manually or dynamically, with PHP for example.
It's working really well for me, I hope I helped.
If you're using Weebly, start by viewing the published site and right-clicking the image to Copy Image Address. Then in Weebly, go to Edit Site, Pages, click the page you wish to use, SEO Settings, under Header Code enter the code from Shef's answer:
<meta property="og:image" content="/uploads/..." />
just replacing /uploads/... with the copied image address. Click Publish to apply the change.
You can skip the part of Shef's answer about namespace, because that's already set by default in Weebly.
Kotaku has launched a new design without hashbangs. Their site still clearly uses ajax requests, but somehow it is still found through Google and the content shows up in the pagesource. How do they do it? Their text seems to be contained inside a script type=text/javascript, but I don't understand what effect that has, or why they would do that.
(of course, the first page request may just trigger a static, serverside constructed response. But check other articles, it does load json through an ajax request. No page refresh)
Have a look at this site for example:
http://kotaku.com/5800326/read-some-of-new-tomb-raider-game-right-now
No hashes, a very well formed URL and it appears in Google. I have read the Google Ajax guide, and as far as I understand it, Google only requests an html snapshot iff you use #! inside your url.
For your convenience, I have made a screenshot that shows how the text looks inside the Chrome debugger: (what does "ganjaAjaxContent" mean?)
If you search for this article, it is the first match in Google:
Google search for Kotaku article
Being able to do ajax without having to worry about Google search would be excellent.
Kotaku and the other Gawker sites are doing a number of things for SEO:
Submitting XML sitemaps for all of their content
http://kotaku.com/sitemap_today.xml
http://kotaku.com/sitemap.xml
Correct use of title and description tags for Google and Facebook
<title>Read Some of New Tomb Raider Game Right Now</title>
<meta name="fragment" content="!">
<meta name="title" content="Read Some of New Tomb Raider Game Right Now" />
<meta name="description" content="Upcoming Tomb Raider reboot doesn't have a release date yet, but website Siliconera apparently has the game's script and published what's reportedly an excerpt from it. Check it out. [Siliconera]" />
<meta property="og:title" content="Read Some of New Tomb Raider Game Right Now" />
<meta property="og:description" content="Upcoming Tomb Raider reboot doesn't have a release date yet, but website Siliconera apparently has the game's script and published what's reportedly an excerpt from it." />
Displaying HTML post content when Javascript is turned off (inspect the <div class="post-body quick-post"></div> element)
So you're right, Google's first visit loads the semantic, accessible serverside-constructed page. WHile Google can crawl hashbang pages, it doesn't need to, because all of the pages are indexed via the sitemap.xml
Hope this answers all of your questions.
p.s. having said all this, hashbangs are still bad for the web
http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
http://blog.benward.me/post/3231388630
I code a news PHP script. End of each news I have a Facebook share button. The problem is I can't display thumbnail images with Facebook share.
I tried Meta OG
<link rel="image_src" href="" />
element without any success. Interesting thing is, some of the domains which is using my news PHP Script, has no problem with it but some has.
Domain without any problems:
http://www.yenialanya.com/manset/vergi-denetmenine-itiraz.htm (please check the bottom of the news)
Domains with problems:
http://www.usakhabermerkezi.com/egitim-ogretim/usak-universitesi-rektorluk-secimleri-sonuclandi-iste-secim-sonuclari.htm
http://www.demokrathaber.net/dunya/dunyanin-ekseni-kaydi.htm
http://www.tebilisim.com/v4/siyaset/benzin-zamlardan-bizde-hosnut-degiliz.htm
I also tried addThis and it didn't solve the problem.
All of the domain names above are using the same system. I thought it might be because of the system so I tried clean HTML page:
http://www.phpsistem.com/fb/
As you can see in the last example, I used 2 different kind of sharing options. First with popup. I sent all parameters over URL but some domains display images, some don't. I also added addThis option.
I also thought about .htaccess and cleaned everything in it since I thought .htaccess might block something. I took every step very carefully which I could think of.
This issue started to be annoying, I would be glad if anyone could help me out.
Use Open Graph protocol
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
To test each links use URL Linter
Look at this forum, most of them will ask same questions, why OG image is not working on like button. It's a bug maybe? Bug 16580
Are you using a public server or a local one? Facebook share doesn't show pictures if the URLs are coming from localhost.
Facebook seems to want images that are at least 200px in both directions, whether supplied in the OG metadata, or just embedded on the page. They have updated their URL linter to show this error for the OG metadata recently. I can't find sources now, but I thought they used to have a maximum pixel dimension of less than 200px previously...
Also, I've seen problems displaying thumbnail images for Chrome on OS X, where on Windows browsers there is no problem. Really strange.
Go to http://developers.facebook.com/tools/debug and fill in your url
If the Responscode is 503 then your website is not accessible. It could be that your website is under construction…
I have a website that is updated regularly and I am having a problem where old content is showing up on the page. It can be fixed by refreshing a few times or clearing the cache. I am looking for a solution so no data is stored on the PC and the site is forced to refresh each time. Perhaps an auto cache clear plugin or something of the like? Any ideas?
This may sound like a good idea at first but how many users do you hope to support in the future?
I ask because if every request should be completely refreshed every time you are going to have a LOT of traffic on your web server. And, your users are going to start complaining about page load times.
With help from tools like yslow and firebug, we've tried to analyze the portions of our pages that can be cached and those that can't. Tip of the iceburg, but...
Images to support site layout - backgrounds, buttons, etc. should be cached for a very long time. They go in a folder tree flagged by IIS as cachable for a long time. They could be delivered by a CDN long-term. If these have to change, we upload new files with new names.
Script/CSS and other, possibly-changing content goes in another folder that gets a shorter cache duration. This could be a problem if we have to fix bugs, but again, upload a new file with a new name if necessary.
Anything data-driven (our app is a catalog) is localized and gets refreshed every time.
This is still a work-in-progress for us, but we're seeing MUCH less server traffic and MUCH faster page load times.
I hope this helps!
use this, my son
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
Try putting this in your head tags
<meta http-equiv="cache-control" content="no-cache">
Edit Just a note, this doesn't force the browser not to cache it, but most browsers will listen
i suggest u to try this one , I use this way when my code still on production
<link rel="stylesheet" href="styel.css?v=<?= time(); ?>">
but when u're ready for live mode, put the latest version of ur css, or whatever u want like ?v=1.1
hope it will helps u