SEO problems using jQuery load() - javascript

I have created a modal window with load function with links inside the modal window. The crawler is unable to read and index those links. I need a way to make crawler index those links.
I see websites using angular js ranking such as https://www.dailyobjects.com/designer-cases (This website has a similar modal window) ranking on top in Google Search and I google never reads or index angular js made pages.
They managed to crawl it, so there must be a way to crawl a javascript modal window which I have made.
How can I achieve this?

Angular uses Server-Side Rendering(SSR) to fix SEO issues. Just read more on this.

Related

Add custom javascript to wix

I am trying to add custom javascript to wix, but it doesnt work. I have tried almost all I found on google but it doesnt work.
<script type="text/javascript">
window.parent.location.href = "https://url/track"
</script>
The script above needs to be loaded on every wix page, it contains redirection
I was wondering if this is possible in wix?
The way to add custom code to each page in a Wix site is by adding Site code in the built-in IDE.
To access it, enable Dev mode at the top menu and click the Site tab at the editor.
Note that you can't access the DOM directly. However, Wix has a pretty rich API that may cover your needs.
looks like you need to use the wix location API: https://www.wix.com/corvid/reference/wix-location.html#to
From my limited knowledge of wix it seems like your implementation is just wrong for the problem you're trying to solve.
I had a quick read of this article which isn't too old: https://www.wix.com/corvid/forum/community-discussion/page-redirect and it seems like a better approach.
Make sure you've enabled DEV mode and then open the script panel at the bottom of the page.
First, you should import the module that contains the method you need. In your case, that would be wixLocation. Inside the onReady function, you should call winLocation.to method.
import wixLocation from 'wix-location';
$w.onReady(function () {
wixLocation.to("http://some.new.location"))
});

Chat widget with react.js

I am writing a chat widget, that would be distributed to the end users with little code to put in their website. Usual routine.
My widget is going to be written in React. I know several ways to achieve this. Let me list the ways that I could think of.
Give a code snippet with directly iframe and source url in it. Problem with this approach is, it can be used only if the widget is embed. If the widget needs to be popup, flexibility will be lost.
Give a code snippet with a javascript being loaded asynchronously. Javascript will create an iframe in the parent webpage and src can be set. This widget javascript can have little intelligence. This is the usual approach followed by most of the widget developers.
Of course, source URL will render a React page which is bundled by webpack, in either case.
I wanted to know the best practices of developing a widget. So I went through the popular implementations of it. I liked Intercom's widget very much. It is written in React. I analyzed how it works.
The minimal javascript is loaded async on the webpage. It is injecting an iframe with id intercom-frame. That iframe has a script in it's head with a source URl. Obviously it is React bundle.
The thing that I don't understand is, below this iframe, a div is created with three iframes in it. One to show the chat bubble, another to show the chat bubble icon, the last one to show the actual chat window. Those iframe doesn't have source url and I guess the bundle is served from the first iframe created by the widget javascript.
I came across this SO question, which partially answers my question. From the answer,
expose some API between your customer webpage and your iframe, using window messaging.
the main code (the iframe code) is then loaded by this first script
asynchronously, and not included in it.
What I don't understand is,
1.) How they would have achieved it with window messaging?
2.) How they would have managed to create a div with iframes in it, from another iframes script?. Widget javascript is not creating those elements, based on it's source. It should have been done by the React bundle in the iframe generated by widget js.
3.) How a react bundle inside an iframe can create react elements in the parent DOM?
None of the iframe created by Intercom's script has src attribute, that means they are not subject to the same origin policy. Therefore, they can modify parent page html and vice versa.
However, I don't understand why they need to have separate iframe. And why using a script to inject another script which inject the main html content. Doesn't the first script have enough ability to inject html content? I'd love to be lightened about these things.

Using Ajax with Jquery on a Node in Drupal 7

I'm very new to PHP/Drupal. The idea here is I'm trying to grab a dataset from an Energy Star API and transfer that information into a table I created using Ajax. On localhost this works perfectly using Jquery's GETJSON and appending the necessary information to the table with append(). When I try to do this in Drupal, however, nothing works. There is no physical file for this page, it's just a node. I've included the Javascript and CSS pages to the page template with the necessary page path and I know the page can access both because I used Jquery to go between tabs and that works, but I can't get anything Ajax/renewing CSS with table to work.
Do I have to create a module and use a hook menu? I've seen that places but it doesn't seem right seeing that I only have the node to work with.
Thanks in advance!

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

Problems in implementing Disqus plugin due to jQuery issues

I am working on a blog website at http://d361.azurewebsites.net/Blog. I have used a template for full page flip from http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layou which uses javascript and jquery, other than the obvious.
I have 2 problems.
I need disqus plugin on every article of the blog. But since the whole website is basically one single webpage, I have not been able to implement it. Further anchor tags are not working.
Currently the disqus plugin is working in case of the first article only.
I am also using social sharing buttons on the site. Again, they share only the mail website link, i.e d361.azurewebsites.net/Blog and not the actual articles. I tried to use anchor tags but it is not working.
Kindly help me out here. As you must have already known, I dnt know much beyond html and css.
Disqus won't work with single-page applications out of the box, you have to use our AJAX protocol to reload the thread with the new information. The process is documented here: http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
Whenever the page content is changing, you would call DISQUS.reset like this:
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "new_disqus_identifier";
this.page.url = "http://example.com/#!new-url";
}
});

Categories