I've built an application on next.js. For that I'm injecting custom meta tags into the head of page. Following is the content i'm injecting into the Head of document.
<title>{`${recordingData.title} - VUMU`}</title>
<meta name="description" content="Check out a video I made via VUMU" />
/* SEO */
<meta property="og:site_name" content="VUMU.IO" />
<meta property="og:type" content="website" />
<meta property="og:url" content={`${config.WEB_URL}share/${query.pid}`} />
<meta property="og:title" content={`${recordingData.title} - VUMU`} key="title" />
<meta property="og:description" content="Check out a video I made via VUMU" />
<meta property="og:image" content={recordingData.thumbnailUrl} />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta name="twitter:card" content="summary" />
/* OEMBED links discovery */
<link rel="alternate" type="application/json+oembed" href="https://2rstwutqz5.execute-api.eu-west-2.amazonaws.com/dev/get-recording-oembed?url=https%3A%2F%2Fstage.vumu.io%2Fshare%2F60d81714d4324bb2b7a595ab&format=json" />
<link rel="alternate" type="application/json+oembed" href="https://2rstwutqz5.execute-api.eu-west-2.amazonaws.com/dev/get-recording-oembed?url=https%3A%2F%2Fstage.vumu.io%2Fshare%2F60d81714d4324bb2b7a595ab&format=xml" />
/* Other tags */
Plus following is the link contaings these tags. https://stage.vumu.io/share/60d81714d4324bb2b7a595ab?src=ext
Now the problem is that when i share the link url on actual social media platform it doesn't load up the embeded iframe.
Related
When typing www.8billionminds.com or http://8billionminds.com on twitter, the image on the thumbnail shows correctly, but when typing https://8billionminds.com then it doesn't.
Any idea why?
It works fine on linkedin or facebook, but not twitter.
These are the meta tags
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>8Billionminds | worldwide live learning platform</title>
<meta
name="description"
content="We are a free online interactive learning platform where you can learn, teach and chat about almost anything."
/>
<meta name="keywords" content="live learning, online learning" />
<meta property="og:site_name" content="8Billionminds" />
<meta property="og:type" content="website" />
<meta property="og:location" content="en_UK" />
<meta property="og:url" content="http://www.8billionminds.com/" />
<link rel="canonical" href="http://www.8billionminds.com" />
<meta
property="og:title"
content="8Billionminds | worldwide live learning platform"
/>
<meta
property="og:description"
content="We are a free online interactive learning platform where you can learn, teach and chat about almost anything."
/>
<meta property="og:image" content="${webAppRoot}images/8BM-open-graphic.png" />
<meta property="og:image:alt" content="${webAppRoot}images/8BM-open-graphic.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="#8Billionminds" />
<meta
name="twitter:title"
content="8Billionminds | worldwide live learning platform"
/>
<meta
name="twitter:description"
content="We are a free online interactive learning platform where you can learn, teach and chat about almost anything."
/>
<meta name="twitter:image" content="${webAppRoot}images/8BM-open-graphic.png" />
<meta name="twitter:image:alt" content="${webAppRoot}images/8BM-open-graphic.png" />
EDIT
It works fine now. I changed nothing.
your og:url
<meta property="og:url" content="http://www.8billionminds.com/" />
has hardcoded http and www
EDIT:
checking on https://cards-dev.twitter.com/validator
it seems to work
I am working on a WEB API 2 Project. I am using Swagger documentation.
I am also using ODATA V4.
I want to set my default page of my web api to swagger, How can I do it?
You can create a redirect, see an example here:
http://turoapi.azurewebsites.net/
All I did was create an index.html with the following code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="0; URL='/swagger'" />
</head>
<body></body>
</html>
With that make sure in Web.config
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
... it should not include this tag.
<clear/>
About 2-3 weeks ago the product image and description quit showing in posts to our Google+ business page.
They are showing on our Facebook business page.
Heres the OG code:
<meta property="og:type" content="product" />
<meta property="og:title" content="Product Name" />
<meta property="og:site_name" content="Website Name" />
<meta property="og:description" content="Description of listed item on webpage" />
<meta property="og:image" content="http://www.mywebsite.com/myimage.jpg" />
<meta property="og:url" content="http://www.mywebsite.com/product-name.html" />
Any ideas?
I want to share video on Google plus
I am using open graph tags
<meta property="og:site_name" content="..." />
<meta property="og:url" content="..." />
<meta property="og:title" content="..." />
<meta property="og:type" content="..." />
<meta property="og:image" content="..." />
<meta property="og:video" content="..." />
<meta property="og:video:type" content="..." />
<meta property="og:video:width" content="..." />
<meta property="og:video:height" content="..." />
it does share as a link and not video.
Thumbnail displays but not embed video within it.
Google+ only supports a select few Open Graph tags.
og:title
og:image
og:description
I have a Person Create page which is called from two different pages. I want to show the parent node of this Create page based of the page i am called from.
<mvcSiteMapNode title="Create" controller="Person" action="Create" />
I want the above node to be inside the below parent node based from where it is called from.
<mvcSiteMapNode title="All People" controller="Person" action="AllPeople" key="AllPeople" >
</mvcSiteMapNode>
<mvcSiteMapNode title="People" controller="Person" action="Index" >
</mvcSiteMapNode>
Thanks in advance
To accomplish this, you need to make 2 separate nodes and ensure each one has a unique URL. MvcSiteMapProvider requires that each node has a unique routing signature in order to function. Each node would be placed as a child of the respective category.
You can make a unique URL by adding a value to the query string or by changing your routes so you have a completely different URL in each case. Once you have a unique URL in each case and have configured the route information to create each URL in your nodes, the breadcrumbs will work as expected.
<mvcSiteMapNode title="All People" controller="Person" action="AllPeople" key="AllPeople">
<mvcSiteMapNode title="Create" controller="Person" action="Create" category="AllPeople" />
</mvcSiteMapNode>
<mvcSiteMapNode title="People" controller="Person" action="Index">
<mvcSiteMapNode title="Create" controller="Person" action="Create" />
</mvcSiteMapNode>
Results in:
All People > Create (URL is /Person/Create?category=AllPeople)
People > Create (URL is /Person/Create)
However, there is one more thing you need to do if your duplicate page is Internet facing - add a canonical tag. This will tell search engines that you intended to put the same content on 2 different URLs. You can decide which specific URL you want to be shown in the index and then add the canonicalUrl with that URL or canonicalKey with the key of that node to the "duplicate" nodes.
<mvcSiteMapNode title="All People" controller="Person" action="AllPeople" key="AllPeople">
<mvcSiteMapNode title="Create" controller="Person" action="Create" category="AllPeople" canonicalKey="CreatePerson" />
</mvcSiteMapNode>
<mvcSiteMapNode title="People" controller="Person" action="Index">
<mvcSiteMapNode title="Create" controller="Person" action="Create" key="CreatePerson" />
</mvcSiteMapNode>
Then add a #Html.MvcSiteMap().CanonicalTag() HTML helper to the <head></head> section (usually in a layout page), and MvcSiteMapProvider will automatically generate the Canonical tag when necessary.
<head>
<meta charset="utf-8" />
<title>#Html.MvcSiteMap().SiteMapTitle() - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Html.MvcSiteMap().CanonicalTag()
#Html.MvcSiteMap().MetaRobotsTag()
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
More information:
http://www.shiningtreasures.com/post/2013/08/10/mvcsitemapprovider-4-seo-features#canonical-tag
https://github.com/maartenba/MvcSiteMapProvider/wiki/Multiple-Navigation-Paths-to-a-Single-Page
http://www.mattcutts.com/blog/canonical-link-tag/
Be sure to check out the code download in the first post for a working demo.