How can I add schema.org (primaryImageOfPage) in my site - html

I have no idea how to add an image in Google Search.
I just want to add the image of the page in Google Search.
<body>
<div>
<img height="180" src="http://2.bp.blogspot.com/-ARWw3b8l8RI/VQ_gW2mIHtI/AAAAAAAABQc/tuzJvua7o5Q/s1600/Bisan%2BAsa%2BKo.jpg" width="320" />
</div
</body>

You must use the following code:
Method 1
<meta itemprop="image primaryImageOfPage" content="e.g./pic.jpg" />
Method 2
<body>
<div itemscope itemtype="https://schema.org/WebPage">
<img src="e.g./pic.jpg" itemprop="primaryImageOfPage" />
</div>
</body>
Also referer to:
https://schema.org/docs/gs.html
https://schema.org/primaryImageOfPage

Related

html not loading multiple images

I am trying to make an image page for a website and only one of the images loads. Anybody have advice?
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main2.css">
</head>
<body bgcolor="black">
<h1 style="color:white"> Images </h1>
<div class="row">
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image1" height="250">
</div>
<div class="column">
<img src="‪‪‪C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image2" height="250">
</div>
</div>```
[1]: https://i.stack.imgur.com/YYky7.png
move your images to the same directory as your HTML files and change your img tag's src to a relative path, i.e. something like <img src="‪‪‪boat.jpg">

HTML id attribute doesn't work in Google Chrome

So.
First I used this <img onmouseover="preview.src=img1.src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/> but it didn't work. I changed 'id' to 'name' and it worked. But name attribute is obsolete and not recommended to use. So what should I use? I'm trying to make a image gallery for my school project. And because it's a school project it must be "perfect" html. No any errors.
And btw. 'id' worked in Internet Explorer and Mozilla Firefox. But not in Google Chrome.
My whole code is this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="image001.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" name="img2" src="image002.jpg" alt="Image Not Loaded"/>
</div>
<br>
<div class="preview" style="text-align: center;">
<img name="preview" src="image001.jpg" alt="No Image Loaded"/>
</div>
</body>
</html>
And this works in Google Chrome when I change id to name.
Likely the variables preview and/or img1 are undefined. I assume you're trying:
<img onmouseover="document.getElementById('preview').src=document.getElementById('img1').src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/>

Cannot link image to url (<img> tag inside of <a> tag not working for slideshow)

I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Images in github pages and relative links

I created a user's github page.
Now, suppose I have an Image file at the root of the repo located as Images/Emoticons/Cool.png
I try to insert that image in my main Index.html file.
I write -
- <img src="\images\emoticons\cool.png"> and nothing shows up online and offline
- <img src="images\emoticons\cool.png"> and nothing shows up online but I can see the image offline
- <img src="..\images\emoticons\cool.png"> and nothing shows up online and offline
What should be done?
As the site is being served by Linux servers, the path is case sensitive.
In order to make this work, replace emoticons with Emoticons in the provided url.
Also, in a URL, replace the backslash (\) by a forward slash (/).
The following HTML code should properly display the image
<img src="images/Emoticons/cool.png" alt="hi" class="inline"/>
try this
<img src="images/emoticons/cool.png" alt="hi" class="inline"/>
Full Page
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Home Page : My Github Web" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Home Page</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/Avi-Aryan">View on GitHub</a>
<h1 id="project_title">Home Page</h1>
<h2 id="project_tagline">Avi Aryan</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<br />
Hi ! <img src="images/emoticons/cool.png" alt="hi" class="inline"/><br /><br />
I am a young coder currently having school time in India.<br />
I love intelligent-coding, algorithms and logics and<br />
enjoy playing Cricket and Badminton.<br />
<br />
My coding abilities are currently limited Autohotkey and only Autohotkey.<br />
A listing of my Autohotkey works can be found here.<br />
<br />
You can always visit my blog if you are looking for cool tricks and cracks.<br />
I write original , hard to find content.<br />
<br />
<hr><br />
<h3>My Github Project List</h3>
<ul>
<li>Clipjump
<li>Sublime 4 Autohotkey
<li>Sublime Text Autohotkey Package
</ul><br />
<h3>Other Links</h3>
<ul>
<li>Autohotkey Scripts Listing
<li>Blog Index
</ul>
<br /><br />
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<h2><font color="#FFFFFF">Profiles</font></h2>
<p>
Github<br />
Autohotkey Forum<br />
Google +<br />
Blog
</p>
</footer>
</body>
</html>

When a link is clicked, pull up and display that information

I am trying to figure out how to do some HTML. Basically what I want is: if the user clicks on "coupon" a section of the page displays it. But only if it is clicked on. I have no idea where to look for this or what the name of what I'm trying to do is. Can someone point me in the right direction? I have tried the <a name=""> but that takes me to a spot that is already there.
On most cases, this requires JavaScript. But you can still do it without script with the exception that the section must be visible at all time. The actual contents would be placed in separate HTML pages (i.e.: files). Below is a simple example:
main.html file:
<HTML>
<BODY>
Content 1<BR />
Content 2<BR />
Content 3<BR />
<BR />
<IFRAME ID="section" WIDTH="800" HEIGHT="600" />
</BODY>
</HTML>
content1.html file:
<HTML>
<BODY>
This is content 1
</BODY>
</HTML>
content2.html file:
<HTML>
<BODY>
This is content 2
</BODY>
</HTML>
content3.html file:
<HTML>
<BODY>
This is content 3
</BODY>
</HTML>
The above main.html content section will be blank when the page is loaded. To set the initial content, change the IFRAME tag so it would be like this:
<IFRAME SRC="content1.tml" ID="section" WIDTH="800" HEIGHT="600" />
If you don't want to display the section when the page is loaded, you must use JavaScript like this example:
main.html file:
<HTML>
<BODY>
<SCRIPT>
function showSection() {
document.getElementById('section').style.display='';
}
</SCRIPT>
Content 1<BR />
Content 2<BR />
Content 3<BR />
<BR />
<IFRAME ID="section" WIDTH="800" HEIGHT="600" style="display:none" />
</BODY>
</HTML>