Recently I noticed that after searching for some term in Google and browsing the search result, the relevant web page showed my relevant search text as highlighted.
So, I noticed what Google has done is, as sending extra parameters by appending to the URL as #:~:text=this%20text%20will%20be%20highlighted.
As an example if I go to https://en.wikipedia.org/wiki/Stack_Overflow, it shows as follows;
But when I append #:~:text=Overflow to the URL and visit https://en.wikipedia.org/wiki/Stack_Overflow#:~:text=Overflow, then it shows as follows (note that word 'Overflow' is highlighted);
What I'm wondering is how this behavior is achieved?
What are such other types of such parameters that we could use?
Edit:
My browser is: Microsoft Edge, Version 83.0.478.45 (Official build) (64-bit)
Below are some more common and less advanced URL parameters but, I'll post them here anyways:
There are of course Anchor links that can be appended to the URL
<!-- https://Example.com/#top -->
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
And URL query parameters that can be picked up by the server in a variety of ways, here is a python/Django example
# https://Example.com/?variable=someValue
import requests
def page_view(request):
variableValue = request.GET.get('variable', None)
Related
I have an application by mean-stack that hosts a website and an Excel add-in. html5 is enabled, and it has
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
In the Excel add-in, I have a button that opens a page in the website by Dialog API:
$scope.openDialog = function () {
Office.context.ui.displayDialogAsync("https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD", {}, function () {})
}
When I click on this button in Excel Online in Chrome, it opens a dialog box with the following url (note that # and several %2F are systematically appended), but it does not prevent from well displaying the page.
https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD?_host_Info=excel|web|16.00|en-us|b6f37f78-e519-7d03-0069-b9c4317a362c|isDialog#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7Cb6f37f78-e519-7d03-0069-b9c4317a362c%7CisDialog
However, when I click on this button in Excel Online in Firefox, the url changes quickly to the following url, which turns out to display the homepage of the website:
https://localhost:3000/home#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-gb%7C919fff78-e51f-dc20-0c3c-871b7d0ec25d%7CisDialog
So my questions are:
1) Why does Office.context.ui.displayDialogAsync add systematically # and %2F to the url of my website? Is it possible to prevent this from happening?
2) Is it possible to make a url (regardless of # and %2F) that Firefox accept?
Edit 1: It seems that if I don't use html5-history-api, it will work. So does not know how to disable html5-history-api for that displayDialogAsync? (The reason why I have to use html5-history-api after office.js is here.)
It is not displayDialogAsync that is doing this. It is a frequent issue with Angular routing and Angular location strategy. Search for "angular app is adding hash to my urls" and you will find a lot of information about it and solutions.
I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
I was trying to access content through previews. At first, this was fine with both Preview and non-preview views, but I moved some of my code to another branch and noticed issues. I remembered seeing http://localhost:63761/1120 work, but now: I'm not sure if this is the correct form of address for content under 1120 to appear. Is there something I need to check?
Postfixing your url with an id is a quick way to look up the content of a node:
For example the following url works in my environment, but is not user or search engine friendly https://localhost:44392/1141
When I look up the node in my umbraco backend: https://localhost:44392/umbraco#/content/content/edit/1141
Navigate to the Properties tab and look for "Link to document", that's the user friendly url for the node
If I understand your question properly, the urls should be like below
Non-preview mode url -
http://localhost:63761/umbraco#/content/content/edit/1120
Preview mode url -
http://localhost:63761/umbraco/preview/?id=1120#?id=1120
Thanks
In another question a user used this url(1) which contains a data table and somehow converted the code into this url(2) in order to scrape using json and beautiful soup.
My question is how do you get the second url which is scrape friendly given the first url?
The user which somehow got the 2nd url was asked how he got it and it has been a while and he never responded..Here is a link to the original thread.
You can do that by using Google Chrome Developer Tools (and with other browsers as well).
Open Google Chrome browser and navigate to the first URL
Open Developer Tools (⌘ + option + i)
Head to "Network" tab
Click on "Preserve log" and on "XHR" (since it's an XMLHttpRequest)
Reload the page and you'll see the XMLHttpRequest to the second URL
Note: In this case I guessed that it was loaded by an XHR but I'd recommend to click "All" instead of "XHR" next time. You'll see more results and you'll need to filter and/or take some more time to find the call/request on the matter, but it'll be more accurate.