Lets say we have a long list of posts on a single page. Each of those posts has a hidden div with multiple img tags inside it. When a user clicks on the post, the images inside the hidden div should be showcased in a modal gallery.
Which approach is better SEO-wise - outputting the Bootstrap modal + image gallery markup for each post and unhiding it whenever the user clicks on the post, or having a single hidden modal and clone()'ing images to it?
I'm leaning towards the first solution because it is way easier to implement. The second one requires listening to DOM events as I should only initialize the gallery after the images have been cloned to the gallery div inside the modal and thus is a bit trickier. Also, I'm not so keen about copying DOM nodes here and there.
Which is the better approach?
EDIT: I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
Both methods are equivalent from an SEO perspective for Google, but it may take it a bit more time to index your content for the second method since, it needs to execute Javascript.
However, not all search engines are capable of executing Javascript. Therefore, image tags are all they can eat SEO-wise.
Related
So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!
It's a minor question, but here's the thing, I have this dynamic list of news in my webpage, when you click a link it opens a modal with a title and a paragraph.
At the moment I'm thinking that since the number of links will always be small -like 6 at most-, I could write JS that would write the actual DOM and put all the required classes on the page before running bootstrap. Meaning that the browser would have to load all the text information when it reaches the page.
But if the content was a little bigger, I feel that it would be better to load the news dinamically, meaning that I'd have to attach a function to each link that would change the content of the modal before showing it to the user.
Does it make a difference? Is there a better practice? Does it really matter?
I would load it dynamically to make sure its efficient if you decide to make the data larger in the future. But as of now it won't really make a difference in speed.
I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.
I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.
Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)
You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?
I'm writing a web site with several forms of dynamic content. For instance, at the top, there are tabs for controlling which parts of the site are displayed below. And in a couple of pages, there are multiple select/option lists which change based on what has been selected in other select/option lists. Right now, I'm doing all of it with divs. I'm wondering if I should change some of it to frames. Are there other methods of changing this content? And when should I use what?
Thanks.
EDIT
To be more clear about my methods, when I say I'm "using divs" I mean I'm putting my content inside div blocks and updating them with jQuery.
None of the things you mentioned require frames.
Frames are from the past;-)
DIV's make a lot of sense for everything layout related.
Use javascript to do the dynamic option list thingies (either hide() or show() them using jquery or use ajax to Load the different lists into the page)