I am trying to post the link to my portfolio onto linkedin and it always shows up with "Web site created using react app" as the description, which definitely doesn't make it look professional. It is deployed on my domain but is there any way I can get rid of all the create-react-app default stuff on my domain link?
change the description and the title from your index.html file in the public folder then Rebuild your app
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">
<title>React App</title>
You need to change the index.htm file in the public folder the title and meta tags will contain this default title.
You'll need to add these meta tags into the header of your index.html
Also the image size should be minimum 1200x627 (as per the linkedin documentation)
<head>
<meta property="og:title" content="*TITLE*" />
<meta property="og:image" content="%PUBLIC_URL%/linkedin.png" />
<meta property="og:description" content="*DESCRIPTION*" />
</head>
If you're still having issues with LinkedIn recognising the new headers insert the url again but with a random parameter at the end of the url.
So if your site url is:
https://www.example.com
Try adding the link again with the empty parameter:
https://www.example.com?1
This should force linkedin to pull the new head data.
Related
I don't know where to start with this, my default link preview for my site looks like this:
I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:
so I was expecting that the link would have the image and the title(blacked out).
But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?
Thanks for the help.
Your problem is this line in your <head>:
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.
Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.
TL;DR: Remove this line.
For future reference, you can use Facebook’s Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.
Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />
Example from https://ogp.me/
You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.
I have created a Cordova ionic application which has an editor. I have an index.html page. I have one editor.html page. To navigate to the editor page, I have used:
window.open('editor.html')
I have added cordova.js at the top in editor.html.
I want to scroll the screen when user enter any TEXT on the editor as it is hiding the data when I'm typing. I have added keyboard plugin. What can I do to make this work?
meta tags which I have used in index.html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
I am sending Push Notification using OneSignal.
When the user clicking on the push notification, it automaticlly open a link to my web site.
How can I hide the address bar on the Browser?
I tried this code:
<meta name="mobile-web-app-capable" content="yes">
I putted this code on my web site inside the <head>.
But it's working only when the user add the web site to his homepage.
Android browser is WebKit based
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
I am using Open Graph for image sharing but it picks up the wrong image that I’ve already deleted from the database. In the Inspect Element tab of Web Inspector, it shows the correct image path but it does not share the correct image.
PHP code:
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Profile Share by user." />
<meta name="author" content="I" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="http://mydocs.com/">
<meta name="twitter:title" content="User profile">
<meta name="twitter:image" content="<?php echo $SITE_PATH.$meta_userimage;?>" />
<meta property="og:title"content="User profile" />
<meta property="og:image" content="<?php echo $SITE_PATH.$meta_userimage;>"/>
I’ve already referred to this link but it doesn’t help me.
When Facebook queries the open graph data for a page, it gets cached until you flush it or 24 hours are up.
If you visit this facebook debug page and try scraping the page; you will find an option to refresh the scrape by clicking the "Fetch new scrape information" button
I'm using angularJS to develop my application which has many e-cards and each has listed with thumbnails on my home page. From the home page user can share on various social media.
Right now I have shared using https://plus.google.com/share?url= but this is not sufficient for me as it pick-up loading image as image reference and I don't want to share that (Obviously), I would like to share the image user has selected along with the description.
Is there any stream api in google for javascript that will help me for the dynamic content sharing?
Still I wonder How to do that?
You should add special meta tags to your page
<meta itemprop="name" content=""/>
<meta itemprop="description" content=""/>
<meta itemprop="image" content=""/>
Where image is url that should be your preview image.
You can specify sharing options for other networks as well
Twitter:
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:url" content=""/>
Facebook: (image better be 256x256 png or jpg)
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:url" content=""/>
Windows 8 menu links:
<meta name="application-name" content=""/>
<meta name="msapplication-tooltip" content=""/>