Inserting a favicon for a single page - favicon

Is there a way to set a favicon for an individual page? I have a site that has a “mini-site” within it for a particular event and I would like all the branding for that page to be unique to it.

Related

Prevent Component reloading - AEM

I have 2 pages in my web application. Lets say an home page and news feed page. When user clicks a hyperlink on home page then she/ he gets redirected to News feed page. I have 2 separate components in each page like
Home Page --- Header Component & Home Page Details Component.
News Feed Page --- Header Component & News Feed Details Component.
Both the pages has a common component Header. Can I prevent component reloading for the header component when users reaches the second page by clicking link on the first page.
By component reloading I mean the HTML code (HTL) code in the component should not be updated again with updated data instead for the second page, I just want to show the same data associated with header component in the first page.
A new page will always be loaded as a whole, because of just how [HTML] page loads work. What you are looking for is a single page application. They are possible with AEM but are a pain to design, especially the authoring mode behaviour.
This is a very common HTML pattern and possible duplicate of related questions such as: How to auto refresh a section of a page
There are two general approaches, the first being far preferred and supported in various frameworks, all based on JavaScript (AJAX):
Break page into different DIV tags that are independently updated (header separate from body sections, each loaded via AJAX such that only part of the page that has changed is updated).
Use iFrames such that effectively there are different pages - each loaded separately from the other.

How to manipulate the meta area of the HTML dom with Scala-JS for a single page application

General Scala-JS page building advice needed. Most of the examples seem to be of the pattern where the main into which your single page application will go is between the tags in a landing page html file. How do you handle the need to insert something in the meta area of the dom? Do I need to render my landing page dynamically from the server to accomplish this? My specific need is to inject a script tag into the meta area of an already defined static html page. I'm using scalajs-react.
Generally you will want a server-rendered "root page" for the SPA. This allows you to dynamically compute proper cache busting file names for your script and stylesheet tags and to easily manage the cache expiration of the root page. Also, for proper html5 push state support you'll want to serve that page at every URL, which is easily done with a server side route.

Indexing an HTML page that redirects onload

I have a pure GWT based website and as we are aware the search engines cannot index pure gwt based websites. Thus, I have created an alternate web page as shown below which is stored as a separate html in the war folder. The purpose of this webpage is to enlist and index details regarding my website. This page is never displayed on my website, but instead is meant only for indexing. The url leading to this web page is part of the Sitemaps.xml. Thus I am assuming that the below html will be indexed because it's a part of Sitemaps. So here are my questions:
Will the content I give in the div with id "crawler" be indexed given the fact that it is scheduled for removal onload and that the browser is redirected to another url on load?
Is there a better way to get the content indexed for a pure GWT website which does not have any html based user interface?
I can also have urls that will invoke a servlet and return a response that is meant for indexing. But then the same url will be displayed in search results, which is not useful. In other words, I am trying to figure out a way in which the content gets indexed, but when the user clicks the search result he should be redirected to the home page instead of showing the indexed content.
<head>
<script>
function load(){
element = document.getElementById("crawler");
element.parentNode.removeChild(element);
window.location.href='http://<mysite>.com';
}
</script>
</head>
<body onLoad='load()'>
<div id="crawler">
<CONTENT TO BE INDEXED>......
</div>
</body>
As you can see here the div (crawler) that contains all the content that is meant for indexing, is removed as soon as the body loads. Apart from this the page also redirects to the home page of the site on load.
The crawler will read in the entire contents of the page for indexing, so it will have no trouble picking up the portion within the div. The onload is not executed by the crawler prior to reading the page.
A method I have used in the past was to generate static html versions of the pages and reference these through the sitemap.xml. Users landing on the html page would then be directed to the equivalent dynamic page when they click on a link (ie: Buy or Specifications). This worked well for search engine placement with many pages appearing in the top ten.
The best solution to notify the search engines about an undiscoverable website's content is to create a HTML website (as you did). If you create redirects based on the crawler, search engines will not love you. I think you have to fill out your HTML with content with relevant information and add
<link rel="canonical" href="https://gwtsite.com/exact_url"/>
tag to your website's head section. This will notify the search engines that the other site has to appear in the SERP-s instead of the HTML one.

Facebook like button on a product page

My requirement is to integrate my client webpage and facebook using the Flike button.
I have an html page which is used for all the products. Based on the product code selected, the content in the page changes. The URL format is something like this -
in the browser it shows : http://xyz.com/product.aspx,
in the view source, in the action attribute of the form tag : ../../product.aspx?prdcode=123&catcode=3453
Now, my requirement is to place an flike button on this page. I have tried doing it in several ways... but the issue is:
If I click on flike button on one page.. the button is disabled for every other product.
Not sure what all needs to be included in to get this functionality right.
For a product listing page you'd need to have multiple like buttons, each pointing at a URL which represents an individual product - each of those pages needs the appropriate open graph meta tags, include the JS SDK once on your listing page, and have multiple <fb:like tags pointing at the individual product URLs
If the page content is dynamic, I think you can do the same, but you'll need to remove and add the like button as the content changes

Multiple Facebook Like buttons (different activities) on one page?

My one web page uses Ajax to display information about multiple activities.
I'd like to have one Like button per activity. This would mean multiple Like buttons on the page, one per activity. Can this be done?
Can the Like button's url include #!state1 ?
Eg, a web page is located at www.example.com/index.html
It has multiple FB Like buttons on it, one for url www.example.com/index.html#!activity1
another for www.example.com/index.html#!activity2
Will the two Like buttons work independently?
You can have multiple like buttons on a single page, but each like button must be linked to a separate page.
Eg: if you have products, each listing could have a like button next to it, but that like button would link to the product details page.
If you really wanted to, create phantom pages on your site with some meta tags. Then on your index.html, use like buttons that link to those pages.
To ensure no one ever gets to your phantom page, include the tag:
<meta http-equiv="refresh" content="0;url=http://www.example.com/index.html/">
That way, if someone clicks on the link that comes up on a facebook wall, they'll be redirected to the correct page.