I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
Related
I have a JS-based dynamic website which is built the following way:
On the server side the index.html contains the "frame" of the website: the navbar and the sidebars.
After loading it, the inline JS-call dynamically fills the content part, generates the content on the client side.
I have multiple (70+) subsites where the "frame" is nearly identical, only the links and some text are different (and of course the titles).
Just to be able to "see it" somehow:
Main page https://example.com
Title: Home Page
Link1: https://example.com/site-1
Link2: https://example.com/site-2
Link3: https://example.com/category-1
Link4: https://example.com/category-2
Subsite for Site 1 https://example.com/site-1
Title: Site 1 | Example.com
Link1: https://example.com/site-1
Link2: https://example.com/site-2
Link3: https://example.com/site-1/category-1
Link4: https://example.com/site-1/category-2
Subsite for Category 1 https://example.com/category-1
Title: Category 1 | Example.com
Link1: https://example.com/site-1/category-1
Link2: https://example.com/site-2/category-1
Link3: https://example.com/category-1
Link4: https://example.com/category-2
So basically that's all the differences between the server-side content (what Google can index for sure) for the main page and subsites (for sites and categories). So 97% the same. Only after the loading the content part with JS will the difference come - but Google doesn't really load it, or not always. So as Google sees these 70+ sites, they are probably the same.
The question:
Do I have to use Canonical Tag for the main site and the subsites as well? I ask it, because Google doesn't really want to index the subsites, I still can see only the main site indexed. And I don't know if the reason behind it is maybe that on the server side all index.html files (of the main page and all the subpages) are nearly identical.
And I can't find any other suggestions, just to include the Canonical Tag on all sites.
Just like:
All pages (including the canonical page) should contain a canonical
tag to prevent any possible duplication. Even if there are no other
versions of a page, then that page should still include a canonical
tag that links to itself.
A self-referential canonical tag is a tag that is defined on the main
version of the page; irrespective of duplicate pages elsewhere. This
means, even if your page does not have other similar pages with
duplicate content, you still put a canonical tag on that page. This is
also known as self canonical.
All the subsites are listed in the sitemap.xml, but they are not indexed. And I'm searching for solution, that's how I found the Canonical Tag as possible solution. Hopefully.
Thank you.
I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)
I have a mybb forum, and a plugin that adds a public/private chat to the bottom of the forum (it adds a div before </body>).
I would like to navigate the forum without reloading the chat.
In this question, Josh Stodola explains how to change the url.
In this question, there is a small JavaScript code to change the url.
I've also read about HTML5 iframes, but I still can't imagine how can I use it all together.
Should the chat be inside an iframe? an iframe inside the forum? should the forum be inside an iframe, and the chat into another? And those 2 iframes, inside a new page???
I'm messed up...
You should have a window containing chat and an iframe for your content. This will allow you to navigate your forum and only reload the iframe vs the top frame.
<body><iframe src="someurl"></iframe><div>Chat</div></body>
A few things to note: doing it this way will not change the address bar while you navigate and this makes users confused when they try to link to pages and it takes them to the home page or wherever they started browsing your forum.
If you want to do something more fancy checkout pjax. It will let you change urls for the whole page while only loading certain content.
I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.
Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.