Seo of website created on angularjs (google do not interpolate angularjs expressions) - ruby-on-rails

I just finished my website : http://www.kiffetescourses.com
This website is made with angularjs and the meta title and description are updated by angularjs like this :
title ng-bind="page_title"
meta name="description" content="{{ page_description }}"
I use HTML5 pushstate
On google webmaster tool, when I explore my website as google, the screenshot returned has content created by angularjs app.
But when I look on google :
https://www.google.fr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=site:www.kiffetescourses.com
I notice several issues :
Title and description do not appear on search result and angularjs expressions appear...
Google do not follow links on the home page (in footer)
What I did for ajax SEO :
Add meta content="!" name="fragment"
Any idea what I did wrong?
thank you

Search engines cannot run javascript so if you're using angularjs to load your contents all the search engine will see is the page with the bindings like that are not rendered. In order to make this search engine compatible, you need to dish up a version that already have the javascript compiled. Fortunately, there is a guide for this using node/phantomjs to compile copies of the pages in the backend server for the search engine to read.
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Related

Are there any ways to declare AMP on <head> besides the rel = "amphtml" link on Discourse

Problem: I use Discourse as a blog. I built an AMP version but could not declare AMP in the head.
Theme editor Only one fixed link can be inserted before
Or use javascript to add after the page is loaded, but Google Bot doesn't crawl it.
So?
Are there any other declarations? For example sitemap or structured-data
My question on Discourse : https://meta.discourse.org/t/add-dynamic-content-to-head-any-tips/143815

Angular JS and jQuery Mobile routing - treatment of hash anchors in the URL

This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.

Google Website translator translates only single page in Rails

I'm trying to have a multi language website in rails.
So I added the google translate from here
I added the meta script to my application.html.erb so that my whole site is translated.
And the div to my index page only.
But it just translates the index page and not the whole site. When I open the links in the index page they don't get translated. I don't want to add that div to every page in my site.I read this stackoverflow sloution here but that is not working for me. Suggest a solution.
I'm also aware of the Rails I18n library for internationalization but I guess I need to write all the translations myself manually, which I don't want to do.
Can I18n be automated like Google translator?
Are there any alternatives to that which work in fine in Rails?
You have to add the Google translate plugin code to every page or to which ever page you want to make it work .

Link Google+ to my Common Spot Website

How/Where can I add my <link href="https://plus.google.com/{+PageId}" rel="publisher" /> tag in my Website with Common Spot?
Not familiar with Common Spot but did a little investigation. You would likely want to edit your base template (/templates/template-basepage.cfm). All of the pages on the site should inherit from this file. You would insert your link element into the <HEAD> of that template so that the setting was picked up by all the pages on your site.
If you have a more complicated site with subsites that have different Google+ Pages, you would probably use the subsite's template instead and put the different link's in each subsite template.

How to test mobile web app built with jQuery Mobile with Optimizely?

I've built a mobile web app with jQuery Mobile. In the index.php file, there're multiple pages declared as data-role="some_page_name" and their urls are like index.php#my_profile.
Now I want to use Optimizely to do A/B test on one of the pages. I created one variation and let it redirect index.php#my_profile to a new page, url: index_b.php#my_profile. But I have trouble linking this page to other not-in-test pages.
For example, if I have a link in index_b.php#my_profile like this:
My Favorite
It can't link to the favorite page in index.php. And sometimes if it does, you navigate to other pages, you'll never go back to the B version/variation.
Looks like Optimizely can't adapt to the jQuery Mobile multi-page structure.
Any solutions?
You can try to add more tag in href link, such as,
My Favorite
<a href="index.php#favorite" data-ajax='false'>My Favorite</a>
You also could use full link path with http:// prefix.
My Favorite
And an other option is add a link click JavaScript method. You can control the JavaScript content.
It should be okay on optimizely or visual website optimizer.

Resources