2

Hiho,

There's an existing website that i need to include into another site which goes like this:

a.mysite.com

and i need to fetch content from this site in my

www.mysite.com

website...

As i need to access the content of the iframe the Same origin policy produces a problem here. What i did was to configure mod_proxy on Apache to proxy pass all requests from

www.mysite.com/a

to

a.mysite.com

This will work fine...but my problem is that im not sure what the best way would be to include those pages.

1. Idea

As the content of the iframe is a full featured site with a top navigation...left navigation etc....i would need to change the page template to only show the content box to be able to integrate that page in the iframe.

2. Idea

I could just load the DIV where the content lies through JQuery.load() and integrate it into my site.

What is the best way to accomplish such a task? How bad is both ideas from the SEO point of view?

nailuenlue
  • 61
  • 2
  • 7

3 Answers3

2

Unless it involves significant rework, the best solution is to combine the two into a single HTML page on the server side (using server-side includes).

Advantages:

  • No problems with SEO as it's delivered as a single page. Content in iFrames and content loaded via AJAX (with an associated link in the HTML) are traversed, but only the link, not the content itself is associated with the main page. See: http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
  • Faster page load - either of your suggestions will cause the main page to be loaded first before the other content is loaded.
  • No reliance on Javascript - your second method will fail completely if javascript is not supported / turned on.
  • Include all JS and CSS only once - your first method will require these to be duplicated in the <head> of each page. This is more of a long term advantage if you wish to achieve full integration of site "a". However, it can be a disadvantage initially, see below.

Disadvantage:

  • May cause conflicts with scripts and CSS between the two pages. However, this same problem exists with your second method.

If you must choose between either of the two options you proposed, I would not select the second as others have suggested. Significant amounts of static content should never be loaded via Ajax, and in this scenario gives you no additional benefits. At least iFrames guarantee no JS and CSS conflicts.

David Tang
  • 92,262
  • 30
  • 167
  • 149
1

Use the 2nd approach (jQuery.load) and if you're working with HTML5, for browsers that support the History API you can change the URL to whatever the content is for that div.

Check out https://github.com/blog/760-the-tree-slider for an example of how github did it for their tree slider.

EDIT:

I am not sure how using an iFrame whose src points to your own domain affects search rankings but at best it's a grey area. I would assume that possibly some pagerank would trickle from the parent to the child but I have no clue how it would work for instance if a blogger linked to your page with the iframe that pointed to another page. This would be a pretty good question to ask at the Webmaster Help Forum

nedk
  • 673
  • 3
  • 8
  • but the content that i fetch through jquery.load will not be indexed by google..no? I cannot use html 5 :-/ – nailuenlue Jan 06 '11 at 22:44
  • If you come at it from a progressive enhancement approach then you would still have a link on your page that search engines can crawl; you would just be enhancing the user experience by loading only a part of that page using AJAX versus the entire page. – nedk Jan 06 '11 at 22:59
  • If you cannot use HTML5 and the History API I would still recommend modifying the URL so that your users can bookmark and share your URLs, there is a good post about it here: http://stackoverflow.com/questions/2358928/whats-the-best-library-to-do-a-url-hash-history-in-jquery – nedk Jan 06 '11 at 23:02
  • Im not fetching the entire page..just the content part of the page and put it into the content part of my main page. I dont know what you mean by putting a link into my page – nailuenlue Jan 07 '11 at 08:38
  • It was my understanding that you are trying to achieve something similar to what Facebook does where it only loads a part of the page (the main content) instead of doing a full page load (i.e. including the header and footer and navigation). Can you give more information about what you're trying to achieve and what your constraints are so that myself and others can better answer your question? – nedk Jan 07 '11 at 20:11
0

Always say no to iframes. jQuery+Ajax all the way.

Calum
  • 5,308
  • 1
  • 22
  • 27