One-page AJAX-based WordPress site. How should I do it? - ajax

I am trying to create a one-page WordPress website, something like the ones you sometimes see in ThemeForest's WP section: the whole website is a long page that has everything in one place, from about us, to portfolio, to some blog posts, to contacts.
Placing all things on one page is not difficult. But when I started thinking about how to present individual posts and pages, I realised that I probably need a general way of getting posts' data via AJAX, and create new blocks with JS. How should I go about this? I suppose this was done before, but I struggle to find something this specific on Codex or a tutorial with best practices.
Any advice or link will be greatly appreciated.

You could use a plugin such as jQuery Easytabs, download it here, that has a built-in Ajax component.
I've found that the easiest way is to just get all content to load into the divs ahead of time, vs. trying to load all pages through Ajax. However, appending something like '?ajax/ajax' to the end of your urls through the Easytabs plugin is one option that I have successfully used in the past.
If you decide to use the easytabs functionality, there is ample documentation on the page that I linked to.

Related

SEO with angularjs and asp.net restfull service

I have developed a website using angularjs and web api.
The problem is that the ajax rendered content is not crawable by google. And no one can find the website using google search.
After reading many articles regarding this issue, including:
This one with all links of explanation going out,
Google ajax crawling protocol, and also stack over flow question, I couldn't find the proper solution. Those that mention asp.net solutions, are talking about mvc, and I need only the simple REST by web api, other articles are not talking about asp.net.
Is there any simple explanation?
I'm the one who asked this same question long ago, so I will answer from my experience:
Firstly, if all your content are accessible via unique URIs (including the hashbang if you use it), modern search engines should index it just fine. In fact Google can index javascript generated content now. You can try that via the Google Webmaster tool and see how your site is indexed.
Secondly, there are libraries that help you to serve parsed content to search engines if you need to, but in my case I didn't bother much with it since Google is indexing js nicely.
I've seen others ask this question, and maybe I'm missing something or this is outdated, but I don't see why AngularJS needs to be an issue with SEO.
Say you have a landing page and it has a bunch of links. Assuming you're using html5 mode in AngularJS (and I'm not sure that's 100% necessary) and something like ng-route then the links on the landing page can work both as "angular" (JavaScript) links and "old school" (full page load) links.
If you're a human user you can click a link and it will do angular magic and adjust the content without loading the full page. Ok, all fine.
But if you instead copy the link and paste it in a new tab or new browser, it will still work - assuming you've set up routes correctly.
I'm not an SEO expert by any stretch of the imagination, but as I understand it, having links that load pages and having those pages have real and useful content is the core of SEO, and done this way, AngularJS should work fine. The key thing to check is if you copy and paste the link (not just click it) that it works.

How to implement Ajax for my wordpress site?

I'm really confused.
I just desire to implement ajax in my wordpress site: clicking on each link of the menu or on each post, I'd like to show dinamycally the content in the main wrapper of the website (and at the same time I'd like to see the url changing everytime for each page or post).
I have made a research through Google and I found a multitude of tutorials or informations but each one of them is (for me) like incomplete.
Can you suggest me a good tutorial?
Or can you explain me what are the best solutions?
I read somewhere of "Ajaxify", a plugin, can it help me?
Be patient, I have always had some difficulties with ajax and in wordpress things seems to become even more complex.
I guess this tutorial can help you: http://www.designlunatic.com/2011/06/dynamically-load-wordpress-posts-with-jquery/

How can I make my AngularJS Wordpress AJAX blog searchable and SEO-friendly?

I'm working on a Wordpress site which displays posts through a JSON api and AngularJS. I render all post thumbnails on a page and when one is clicked the post is rendered in an overlay on the same page. The post url becomes something like mysite.com/#!/post-name.
Here's the development page http://givakt.kund.griffel.se/blogg-jobb/
Since everything is fetched by AJAX calls none of this info is available to search engines. I have tried to figure out a good approach to make it indexable but it's all very new ground to me.
Would it be possible to get content from or redirect the search engine to a php-rendered (wordpress) page, say like mysite.com/post-name, while thinking it's getting the correct content at mysite.com/#!/post-name. Is it even allowed or even frowned upon? The actual content would of course be as identical as possible at both sources.
Not sure if this is legit approach however, or if it could even work. Is there any other easier or preferred approach that I'm missing?
BTW, I have read http://www.yearofmoo.com/2012/11/angularjs-and-seo.html and how to use PhantomJS and so on to provide indexable pages. So what I'm basically asking is if there's a way to utilize wordpress pages to serve the content instead.
I'm not exactly sure how to do it in terms of technicalities, but Google is usually not happy if you show one version of the page to search engines and something else to actually visitors. It's called cloaking. Just keep it in mind.

wordpress plugin making friendly URLs and accessing variables

I've been searching for a couple of days for a particular answer to my question. I have written a custom plugin for wordpress which we will be using on our site. It was easier to make this a custom plugin rather than trying to use or hack existing ones.
As an example, let's say we are selling cars. My plugin lets us create a new car, upload a photo and write reviews about that car. This is all done through my plugin.
I now need to integrate that to the existing site using friendly urls.
I'd like domain.com/cars/ford-focus/2234 as the url. that would look like index.php?pagename=cars&model=matched[1]&otherid=matched[2]
also domain.com/category/hatchback would be index.php?pagename=category&cat=matched[1]
Both those urls would call a function and I will display the records on the page.
I am really struggling as to whether I create a page called "cars" and have a [shortcode] or do I handle everything in my plugin and rewrite urls. I have tried all sorts and its just not working. I don't know if I fully understand the way it works!?
Also - I have tried the route of using custom post types etc, but for our needs it's not right.
Thanks for any help!!

when to use AJAX and when not to use AJAX in web application

We have web applications elgifto.com, roadbrake.com in which we used AJAX at many places, especially to update major portions of a page. All the important functionality of elgifto.com was implemented using AJAX. Now we realize a few issues due to AJAX implementation.
All the content implemented using
AJAX is not available to the SEO
bots and it is hurting the page rank
of our site.
Users will not be able to bookmark
some of the pages as they are always
available through AJAX.
When we want to direct the user from
one page through an anchor link to
another page having AJAX, we find it
difficult.
So now we are thinking of removing AJAX for these pages and use it only for small functionality such as something similar to marking a question as favorite in SO. So before going ahead and removing, we want to know expert's opinion on this. Thanks.
The problem is not "AJAX" per se, but your implementation of it. Just as a for instance, you can fix the 'bookmark' problem like google maps does it: provide a generated link for each state of your webapp.
SEO can befixed by supplying various of these state-links to the crawlers, either organically trough links in your site, or by supplying a list (sitemap).
If you implement 2, you can fix 1 and 3 with those links.
In the end you must figure out if the effort is worth it, and if you are not overusing AJAX ofcourse, but the statements you've made are not set in stone at all.
I'm costantly developing ajax based websites, with no problems for SEO at all. You just have to use it in the best possible way.
For example, I have a website with normal links pointing to normal webpages (PHP pages), this for normal navigation if a user doesn't have JS enabled. But if a user has JS enabled, a script will change the links behavior, only fetching the content of the page needed.
This way you still have phisycal separated webpages with all their content, which will be indexed as normal.

Resources