I am relatively new to the world of HTML snapshots and JavaScript so I apologize if this is not that hard.
The app we make at our company uses JavaScript to dynamically load image and text content on to a webpage. As you know, JS rendered content doesn't get indexed by search engines. However, I have learned of the otpion called HTML snapshots where you can feed to Google and other search engines all the rendered HTML of the page and it will consume it as long as you follow their guidelines.
My question is that since my script is a 3rd party script that can be embedded on x amount of pages, can I still somehow leverage HTML snapshots or will my clients need to do that?
Although I have not work with this technology yet, I believe it depends by your application and by whom create the data (your client server or you library).
If a lot of content is generated at server side level, server should creates the snapshot.
If a lot of content is generated/manipulated at client, client could creates a HTML snapshot. For example using HtmlUnit.
More info on this page:
https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot
Related
I am currently building a project, which is a survey creator. I created a Rest API on the backend with pure Node.js, and am also working on the frontend.
Obviously, rendered pages need to be rendered depending whether a user is logged in or not, the current survey, etc. Normally, I use Express.js and integrate a template engine like Pug. However this project was designed to be as dependency-less as possible, so no template engines. Instead I simply send "static" HTML files to the client when the user sends a request. Then, on the frontend, I use template strings to "fill in" HTML like this:
document.querySelector('cta').insertAdjacentHTML('beforeend', `<div class="login" style=${isLoggedIn? "display: none;" : ""}`); // etc.
This made me wonder if I am really building a dynamic website. Technically, I am "dynamically" generating the HTML?
But there seem to be conflicting messages from the Wikipedia definition and a Udemy course, both which seem to say that dynamic websites are generated on the server side like this:
When user hits request:
Backend builds template --> compiled to html --> file served to user
The way I do it looks like this:
Html file served --> JavaScript generates html
The terminology is very important here - is my website dynamic or static?
TLDR: it is a hybrid page. If you do not care on SEO it may be redundant to worry about such things, just do in a way that convenient for you.
So, your thinking way is valid, if you provide clients with the page which contents never changes on the client's side - it is the static page. You may show/hide the existing pre-rendered elements (like changing style attribute from display: none;). Any manipulations with shadow DOM or attaching HTML elements on the runtime promotes the page from "static" to dynamical or hybrid page.
Next, if you navigate to a new page on your website and you see the browser fetches a new .html file for the new page to display, it is a mark for the static page. But, if contents of the fetched page are changed afterwards by the script of your website on the client side the page cannot be called "static" anymore, is more like hybrid or dynamic page. Re-rendering the same page is about single-page-applications, all the pages of it are pure dynamic pages.
The main point why we care about is it static page, dynamic page, or hybrid page is SEO optimisation. Web crawlers analyze your page contents to detect what is your page about, to show later in Google, Bing, etc. The crawlers may (and mostly will) analyze your dynamical content in a bit unexpected way for you, so some your target audience risk never see your page. Thus, if you need the crawlers to analyze your page as "internet toy shop" you should fetch all the promotional and descriptional contents from the server and never change it afterwards. If you are making something like users personal cabinet, you can omit worrying on such stuff and just generate contents on the client's side.
As long as it works without the JS I would say that it is a static website with progressive enhancement, as the pages are not generated by the server on each request and then JS (if enabled) is used the provide additional non essential features or functionality.
A static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor. Static sites are the most basic type of website and are the easiest to create. Unlike dynamic websites, they do not require any Web programming or database design. A static site can be built by simply creating a few HTML pages and publishing them to a Web server.
Source
So in my opinion plain html without any frontend, any backend generation is static website, what you describing is dynamic website.
So it is something very basic, consider it as generated pdf, you cannot change it, in order to modify it you would need to go to file edit it, save, and then publish to end users
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My static website</title>
</head>
<body>
<p> Static means no process </p>
</body>
</html>
I am new to javascript and Node.js but I am trying to figure out if there is an alternative to document.getElementById() in Node that has the same function. If it cannot be done in Node, is it possible to create a pure js file to manipulate the DOM and a separate Node file. For extra information, what I am trying to do is to convert csv lines into a json object and then update the webpage with new information which is why I want to use document.getElementById().
document.getElementById() is a function that exists in a browser. There is no such function in nodejs.
It is possible to get a 3rd party module that will parse an HTML web page, create a DOM and then allow you to access the DOM programmatically to see what's in the web page. Cheerio and Puppeteer are two such 3rd party modules, each with differing levels of features. Puppeteer actually uses the Chromium browser engine and can even run Javascript in the page and generate screenshots. Cheerio parses the HTML and lets you access just what it creates (without Javascript running).
It sounds like maybe you're a bit confused about how web pages work. A browser running on the end user's computer loads a web page. Once the page is loaded, at that point the server's job is done. The web page exists only in the browser on the user's computer. The server can't directly, on its own, change that web page.
To change that web page (without reloading it), you would have to have supporting Javascript code in the web page (that runs in the user's browser). For example, you could have your Javascript make an Ajax call from the web page that would request certain data from the server. When the server gets that request, it could generate the data and return JSON back to the browser. The Javascript in the browser would then receive that JSON, parse it into a Javascript object and then use the DOM to insert new objects into the existing web page based on the data it received.
Note that all changes to the existing web page in the browser are made by the Javascript running in the web page in the user's browser, not directly by the server. The server can supply data, but cannot directly change the user's web page itself. Of course, the user could request an update page and the browser would request a new version of the whole page and the server could then supply a page that had different data in it, but that would involve reloading the whole page.
There are also template engines that exist for nodejs so that when your server is generating a web page, the template engine can help you create a set of HTML for that web page that incorporates dynamic data. This doesn't dynamically change a web page that is already sitting in a browser being displayed. Instead, it helps you generate a web page from scratch that incorporates dynamic data into the web page when it is first downloaded. Examples of templates engines that work with Express in nodejs are Pug, EJS, Nunjucks, handlebars and many others.
I want to show website preview on a link similar to facebook when a user post a link. my question has been repeated in the following link ,but I am going to ask specific information throughout my solutions. I have 2 solutions for showing webpage preview which are as follows:1. server side html process 2. client side html process.
1. server-side html process
I used System.Net.WebClient().DownloadString(url) to retrieve the web page data in server side , and I tried to extract the most important information in the page ,but in most cases, main part of the page loads using javascript , therefore I do not have access to that information.
Another solution in server-side html process is to work with webBrowser and WebDocument objects. because I didn't work with these libraries and I don't know how much the Web server performance affect by applying this objects , I only present this solution for discussion .Therefore are there any server-side html graber which fetch all html data including javascript loaded html source?
2. Client Side Html process
The simplest approach for client side is to use the iframe tag, but it has two following problems:
a. I can not access to innerHTML of the frame for the links on other domains.
b. I can not load https webpages such as drop-box and facebook in the iframe
because of "x-frame options" error.
My question is that, is there any other client-side solution to retrieve dynamic html source(loaded by javascript) from 3rd party webpages (usually https)? Or can I solve above problems with some tricks.
I guess server side approach would be most viable option. On client side you can use proxy services which allow to solve cross domain limitation, for example, crossorigin.
To generate a preview, similar to one Facebook provides, you need to get Open Graph information for target page. Libraries to process open graph data available for multiple platforms. OpenGraph-Net could be used on .NET plarform.
I need to create a HTML code snippet that I will distribute to third party websites. This code snippet talks to a php file on my server and contains a logic to update the content(image) after specified time intervals. The reason I cannot use JavaScript is that it is not search engine friendly.
The way I have it now is using an HTML+ Javascript code which includes an XMLhttp request and uses Ajax to call a PHP file which in turn reads a csv file and updates the banner image on the third party site. But it is not crawlable by search engines.
Any other way of getting this to work using HTML? Probably using forms?
HTML is not active. If you want to do something, you need some sort of scripting language. You can do this without using Ajax (XMLhttp). Before Ajax, it was a common practice to relay information to the server using dynamic image loading. Of course, the dynamic image loading required a script. It can be rather simple:
<img id='myimg' src='temp.jpg'
onload="document.getElementById('myimg').src='myscript.php?width='+window.innerWidth;"
>
Your script replaces the image with whatever you like, but you have information delivered from the web page to your server through the get string. Originally, I saw this used extensively to deliver rotating ads. With this, you can record which ads are shown along with information that would otherwise only be known by the web browser.
I have written a HTML code of 300x200 dimension. Now my client wants that the code must fetch from a server and show it to the site they add the code.
We need to add this advertisement to approx 30-40 sites and the content will be changed after 10-15 days so replacing he content on these sites again and again will be pain.
So, I am thinking on adding this code to server/host and fetching and displaying to the website.
I am thinking of using a js script. But I have no idea how I can achieve it.
P.S. I have search on internet but I am not getting a proper keyword or what should I search for.
Can you help me in this thing?
The code will be implemented on blogging websites and wordpress websites.
Thanks
Host your dynamic PHP page (which shows your advertisement) on your server.
Then you have a few options to display it on other websites:
Use JavaScript and include a .js file from your server (same php page, which outputs Javascript), and either use document.write or change the content of a div through a function
Use an iFrame and directly display the PHP page