Is it possible to use a page's meta description as microdata? - html

i'm wondering if something like the following is fine..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microdata Example</title>
<meta id="site-description" name="description" content="description text here">
</head>
<body itemscope itemref="site-description" itemtype="http://schema.org/Organization">
<h1 itemprop="name">Foo</h1>
<img itemprop="image" src="bar.jpg">
</body>
</html>

This won’t work.
The itemref attribute is used to reference Microdata properties, but your referenced meta element doesn’t have an itemprop attribute.
And you can’t add an itemprop attribute to the meta element if it has a name attribute.
If you don’t want to have this description visible on the page, you could
add the meta element in the head, using itemref:
<head>
<meta name="description" content="description text here">
<meta id="site-description" itemprop="description" content="description text here">
</head>
<body itemscope itemref="site-description" itemtype="http://schema.org/Organization">
</body>
add the meta element in the body, not using itemref:
<head>
<meta name="description" content="description text here">
</head>
<body itemscope itemtype="http://schema.org/Organization">
<meta itemprop="description" content="description text here">
</body>
(Assuming that you want to use Schema.org’s description property.)

Related

HTML - How to embed an image to display on Twitter

I'm looking to embed images in an html file so that they show up as a preview on Twitter once the link is posted.
Currently, I have written this HTML file, but the image included in the meta tag does not display after the link is posted, how can I do this?
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:image:" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:site:"Lorem IpsTest Website",>
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
<HEAD>
<TITLE>Lorem IpsTest Website</TITLE>
</HEAD>
<BODY>
<CENTER><p>izudfhzaiufhnzaouif 5645</p></CENTER>
<CENTER><img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane"></CENTER>
</BODY>
</html>
Based on the docs, it looks like you're missing two required meta tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Title Goes Here" />
Your twitter:site tag is also incorrectly formatted - it should be this:
<meta name="twitter:site" content="Lorem IpsTest Website">
The opening <head> tag should also be moved to right after the opening <html> tag in order to encompass the meta tags. I'm also unsure why you have two <title> tags - get rid of one of them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Image Test</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Embedded Image Test" />
<meta name="twitter:image" content="https://teotihuacan-media.com/images/bck.jpg">
<meta name="twitter:image:alt" content="A simple image">
<meta name="twitter:description" content="Welcome lorem ipsum dolore">
</head>
<body>
<p>izudfhzaiufhnzaouif 5645</p>
<img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane">
</body>
</html>
for more information about twitter cards read this https://sproutsocial.com/insights/twitter-cards/

Mvc section not rendered in head but in body

I encountered a strange behavior for #RenderSection in the head section of _Layout.
#section AddToHead{
<meta name="test" />
<open-graph og-title="#Model.Test.OG.Title" og-image="#Model.Test.OG.Image" og-url="#Model.Test.OG.Url" og-type="#Model.Test.OG.Type"></open-graph>
}
meta => is plain html
open-graph => is a taghelper which returns html
and added on _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#await RenderSectionAsync("AddToHead", required: false)
</head>
I tried already with RenderSectionAsync and RenderSection. No difference.
When I check the result on page it is as follows (total different result)
View Source Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</head>
Developer Tools
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
</head>
<body>
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</body>
Facebook sees my site like Developer Tools does.
What I'm doing wrong? Is this even possible?
Developer tools shows how the browser interprets your HTML which is why you're seeing a difference between viewing source and the developer tools.
As for why that's happening, <div> tags in the <head> are problematic. Most browsers these days will interpret those <div> tags as if they were in the body. If you were to render your <meta /> tags without the surrounding div all should be fine.

Share html5 video on website to facebook

I've been trying other people's examples of how to share a webpage with a video on it to facebook, and hoping that the video can play inline in the facebook wall. So far in each of my attempts, facebook only shows the meta information text of my webpage on the profile feed, but doesn't show a video. Here's my HTML code:
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Ocean Vid</title>
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="500" />
<meta property="og:video" content="https://mywebapp.com/video/oceans.mp4" />
<meta property="og:video:secure_url"
content="https://mywebapp.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
What am I doing wrong?
I got it working. From what I can tell, this is the minimum to get HTML5 video to post on facebook
<!DOCTYPE html>
<html>
<head>
<title>Ocean Video</title>
<meta property="og:image" content="http://vjs.zencdn.net/v/oceans.png" />
<meta property="og:type" content="video" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://vjs.zencdn.net/v/oceans.mp4" />
<meta property="og:video:secure_url" content="https://mycoolwebsite.com/video/oceans.mp4" />
</head>
<body>
</body>
</html>
In my case, I needed to make sure I had both a thumbnail image and a secure_url for a video.

How to correctly reference Microdata item from meta tag in header?

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head>
<meta itemprop="creator" itemscope itemref="mdFoo">
</head>
<body>
<div id="mdFoo" itemscope itemtype="http://schema.org/LocalBusiness">
<meta itemprop="name" content="Foo comp">
<meta itemprop="telephone" content="0">
<meta itemprop="legalName" content="Foo comp Ltd">
<meta itemprop="url" content="http://www.foo.com">
<meta itemprop="email" content="info#foo.com">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="mystreet">
<meta itemprop="postalCode" content="1233">
<meta itemprop="addressLocality" content="London">
<meta itemprop="addressCountry" content="UK">
</div>
</div>
</body>
</html>
when validating with Google ( https://google.com/webmasters/markup-tester/ ): "WebSite is not a valid type."
Using https://validator.nu/ gives me "Element meta is missing required attribute content".
Any suggestions on how to fix this?
You have to specify the itemref on the itemscope to which you want to add properties (i.e., the html element in your case). And the element with the corresponding id would have to get the itemprop.
However, in your case you don’t need the meta element, and you don’t need to use itemref:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head>
<title>…</title>
</head>
<body>
<div itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness">
</div>
</body>
</html>
But let’s say you use another itemscope (e.g., for a WebPage item) on the body, in which case you’d need to use itemref:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite" itemref="mdFoo">
<head>
<title>…</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness" id="mdFoo">
</div>
</body>
</html>
Now the creator property will be applied to both items (WebSite thanks to itemref, and WebPage because it’s a child).

Chrome thinks English Language site is Turkish

I'm testing a very simple site — it's a placeholder site mostly built on graphics — and when I just loaded it in Chrome, the Chrome toolbar tells me the pages is in Turkish and asks if I'd like to translate. I can't find anything in the code that could be causing this. I'm just going to put it all up here since there's not much of it. Below is the page code in its entirety, with brand names changed. (There's nothing in the brand names that indicates to me they'd be interpreted as Turkish).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Acme Vineyards ℘ Sonoma County</title>
<meta name="description" content="Acme Vineyards: Farming with Purpose in Sonoma County, California">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="normalize.min.css">
<link rel="stylesheet" href="main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul><!-- before adding anchor tags, uncomment the :hover lines in main.less -->
<li id="durell">Marnell Vineyard</li>
<li id="gaps-crown">Gap’s End Vineyard</li>
<li id="dupont">Acme Vineyard</li>
<li id="wilson">Smith Vineyard</li>
<li id="one-sky">One Star Vineyard</li>
</ul>
</nav>
<div class="main-container">
<h1>Acme Vineyards: Farming with Purpose in Sonoma County</h1>
</div>
<div class="footer-container">
<footer>
<dl id="phone">
<dt class="office">Office: </dt><dd class="office">555-555-5555</dd>
<dt class="fax">Fax: </dt><dd class="fax">555-555-5555</dd>
</dl>
<ul id="mail">
<li id="email">info#acmevineyards.com</li>
<li>PO Box 55555, Sonoma, CA 95555</li>
</ul>
</footer>
<p id="credits">Site Design: Acme Design
</div>
<div id="badge"></div>
</body>
</html>
Use <meta> tags to instruct chrome about the content and ignore translating
<meta charset="UTF-8" />
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="en" />
This question had luck with adding these meta properties to force Chrome to not attempt translation:
<meta charset="UTF-8" />
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="en" />
Your issue is this ℘
Looks like a turkish character to me!