Google Image Search can also filter for re-use licences of the images. I'm wondering how they know which licence an image is published under. How can I declare that licence on my website? Is it possible to declare a licence for each image on the page, or only for the entire page including all referenced images (possibly including pre-fetched content)? And what are the licences that Google understands and can classify to their filter?
I've searched around for a while and have finally found a solution, thanks to Creative Commons. In short, for Google (and other search engines) to know what license the content on a specific page is under, you have to tell it.
This is done the same way as you give Google other data like page relationships - using the HTML structure of the page. In this case, you use the rel attribute of a tags. To declare a single-page license:
License
Of course you can change the link text to whatever, but the important bit is the rel attribute. The href should point to the license itself.
I don't know how Google knows what license it is, but that's how you declare it, and Google's robots will do the magic for you. In terms of bulk licensing, I dare say you could preprocess pages with PHP (possibly in conjunction with an SQL database) to insert this license tag.
Sources:
Creative Commons Licence Chooser;
MicroFormats' RelLicense
You can also have a look at Sitepoint's definition of the rel attribute and its uses.
Hope this helps.
In this answer, I am assuming that:
You have a collection of images licensed under, say, a Creative Commons license.
You want image search engines to return your images when the user is filtering for Creative Commons-like images.
Creating metadata HTML pages
I think the best way to attach licensing information to an image is to create a canonical HTML page corresponding to each image--much like how Wikipedia or Flickr does it.
Let's say that we want to license a gallery of images under CC BY-SA 3.0 where every image has a URL of the format https://example.com/img1.jpg.
In that case, we embed the licensing information in HTML pages with URLs that look like https://example.com/img1.jpg.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Viewing img1.jpg</title>
<meta property="og:image" content="https://example.com/img1.jpg" />
<link rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/"/>
<link rel="canonical" href="https://example.com/img1.jpg.html"/>
</head>
<body>
<div>
<img src="https://example.com/img1.jpg" />
<small>
This image is licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)</a> license
</small>
</div>
</body>
</html>
Using schema.org metadata
We can also schema.org ImageObject metadata to our metadata pages--encoding our metadata as microdata, RDFa, or JSON-LD. The schema.org markup makes it possible to add additional annotations that describe the copyright holder and how to obtain a license to use the image.
Here is an example of a JSON-LD document that you can put inside the <head> tags.
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "ImageObject",
"author": "Bob Smith",
"copyrightHolder": "Bob Smith's employer",
"copyrightYear": 2021,
"contentUrl": "https://example.com/img1.jpg",
"license": "https://creativecommons.org/licenses/by-sa/3.0/",
"acquireLicensePage": "https://example.com/img1.jpg.html"
}
</script>
Exposing your metadata HTML pages to search engines
Finally, you should make it easy for crawlers to find these HTML pages. You can organically pepper in links to these HTML pages whenever you embed one of your images. Alternatively, you could just list all of your HTML pages with the Sitemap Protocol.
Related
I'm looking to create a chm file with a topic with some mathjax equations. The html file corresponding to the topic is very simple:
<html>
<head>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
When I compile in HTML Help Workshop, it's all good. But when I open the resulting chm file and navigate to that topic, I get this issue:
and then the equations don't render - I just get whatever is written in plain text mode. Is there any way at all to get mathjax equations render properly in a chm file?
The CHM help file format is very old and hasn't been updated by Microsoft in a long time: internally it still uses a very old version of Internet Explorer to display the content of the topics.
Recent versions of MathJax are not compatible with older web browsers and that is probably why you are seeing this error.
To avoid this problem, you can either:
Use an older version of MathJax which is compatible with older web browsers such as Internet Explorer 6
Create a hyperlinks in your CHM help file to a webpage which shows the problematic content: it will be opened by the system's default web browser which is (almost) guaranteed to be much newer
Some help authoring tools also include a way to change the Internet Explorer compatibility settings which could be used to force Microsoft Edge to be used to display content: it should allow MathJax to run properly
MathJax used to be able to work in CHM files, but it was a bit fiddly to get it to work. As I recall, you had to use an explicit configuration rather than the ?config=... approach for one thing. There are some very old discussion about it in the MathJax user's forum; see here. it was always a bit difficult to get it to work, and these discussions were about very early versions of MathJax (v1.1, v2.0, v2.1), so you might need to explicitly select older versions of MathJax. Also note that the cdn.mathjax.org address was retired in 2017 (it still exists, but redirects to another CDN, and that might also be a problem for CHM files), so you may want to use one of the other CDNs that serve MathJax, e.g., cdn.jsdelivr.net/npm/mathjax#2/MathJax.js, instead.
As a first simple step you'd try to add following line into your HTML topic files:
<meta http-equiv="X-UA-Compatible" content="IE=11">
Tested and compiled by using FAR HTML with HTML file shown below and some css stuff. I did a reverse test by deleting the line mentioned above only and the script error window appears again.
For further information using X-UA-Compatible see also: https://stackoverflow.com/a/6771584/1981088
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>MathJax Test</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="stylesheet" href="../design.css">
</head>
<body>
<h1>MathJax Test</h1>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
is resulting in a CHM topic like this:
Of course you need a internet connection.
Hy
How i can add a default image for my site to display in the google search results when i type the name of the site to search for?
Currently every few weeks a different image/picture is displaying, current one picture from my news.
Google Search result =
https://www.may_site.com [ logo ]
Currently I added a logo to my first link at the top of the page..
<img src="/images/logo.png" width="70" height="70" alt="Sitename Logo">
Sometimes no picture is visible :/
Google reads meta tags in your page <head></head> to understand what you want to show in search results.
As far as I know there is not an official "logo" or "image" tag that Google support, but is smart enough to understand that "og:image" is the page image.
<head>
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg">
</head>
You can read more here: https://developers.google.com/search/docs/advanced/crawling/special-tags
And you can find a comprehensive list of meta here
https://gist.github.com/lancejpollard/1978404
Google supports defining your logo in structured data. Here is their documentation on it:
https://developers.google.com/search/docs/advanced/structured-data/logo
However, I think you are talking more about a general image related to a page.
Using the og:image meta tag mentioned by #supermod can be a hint. Google also understands images in certain structured data types like recipes, products, articles etc. Their gallery shows what structured data can cause rich snippets like an image:
https://developers.google.com/search/docs/advanced/structured-data/search-gallery
But it is not necessary to provide metadata or structured data to get images in the search results. Sometimes Google just picks one from the page.
my page has set description in meta like this
<meta name="description" content="My best website"/>
Until now this description was displayed with my page in google search result. Now there is totally different text from footer in my page.
Can I change it somehow to be like before?
resubmit your page (via sitemap etc) to google webmaster. Also check that content of your description tag appears on your page, Google may perhaps think that your description tag is irrelivent to your actual page content text and therefore will ignore it and just take stuff from the page itself.
i have to make some updates to a web site built using expression engine. There is no staging area available so i'd like to create a test area of the web site accessible only to site owners allowing them to preview the changes.
Ordinarily, i'd just create a "test" folder and direct the users to this URL. I'm new to Expression Engine and not sure how to achieve this. Any help would be much appreciated.
You can just create a new template group and templates (e.g., "section_test"), direct them there to preview, and then change the template/group names to the proper names once you're ready to launch.
As an additional layer of security, you can add HTTP authentication to this test template.
For previewing CSS changes, I added this to the of my templates:
{if group_title=="Super Admins"}
<link rel="stylesheet" type="text/css" media="all" href="/design/style-dev.css" />
{if:else}
<link rel="stylesheet" type="text/css" media="all" href="/design/style.css" />
{/if}
If the test section is a particular channel, in the control panel you can set the permissions on the channel so that only a particular group can view it.
If you regularly need to preview pages before they go live, consider creating a new status, like "preview". By default, EE only shows items where the status is open. You can specify which statuses are shown like this:
{exp:channel:entries weblog="myPages" status="open|preview"}
{if status == "preview"}
{if group_title == "Super Admins"}
<p>the title is {title}</p>
{/if}
{/if}
<p>the title is {title}</p>
{/exp:channel:entries}
This example uses nested conditionals instead of a conditional with an AND in it, because conditionals with ANDs are considered complex and are parsed differently. (Look up complex conditionals to learn more.)
You have to repeat all the display code within the entries tag pair, so consider using an embed or a snippet for the repeated code.
I recently was browsing a local web design firm's portfolio and found all their sites' code begins as such:
<meta name="keywords" content="a whole bunch of keywords for their site">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
...
I was able to determine that the pages were generated by dreamweaver (at least in part).
Did dreamweaver do this, or did their "developer" just paste the code at the top of the document.
It is my impulse that this is bad practice and it might work incorrectly on some platforms but it got me wondering as to whether or not their may be a reason for this?
That is a terrible practice and invalid HTML. I bet that this would throw IE directly into quirks mode.
But as for your question, either the developer is a script kiddie and shoved the <meta> tag in there with little knowledge of the outcomes, or Dreamweaver did it. I hope it was Dreamweaver...
FYI - just had this issue and Dreamweaver does not put the meta tags in the correct position automatically. Cursor must be placed beforehand into an editable region.