I have implemented the my title description and picture in the head section in Nextjs which is coming from api .I have check the title description and picture shows in meta tage .But When I share the link of my page the crawler can't pick the dynamic data on my head section .
on the other hand if I set the static data hen its working perfectly
its shows the dynamic record when I am sharing the link of my URL to anyone on slack
Related
I need to show title, description and image on url share on social network.
I'm using reactJS,
I tried with helmet and helmet-async, It is changing but when share the url It is picking default one.
I also tried with SSR It is taking dynamically (but in this case only hardcoded title of every page will show. In case of get title from api It is not showing)
I want to include YouTube thumbnail inside my react app.
I already made enable the YouTube v3 api in developers google
so here is the request I am making
https://youtube.googleapis.com/youtube/v3/search?url=https://www.youtube.com/watch?v=6jypIrxqhXo&key=`HEREISTHEKEY`
The thing is The data coming back doesn't have the thumbsmail image data. What am I missing here , what change I have to make to get the thumbnail data back
You need to add part=snippet as an url parameter:
The snippet object contains basic details about a search result, such as its title or description. For example, if the search result is a video, then the title will be the video's title and the description will be the video's description.
So your url should look like this:
https://youtube.googleapis.com/youtube/v3/search?url=https://www.youtube.com/watch?v=6jypIrxqhXo&part=snippet&key=YOURKEY
So i have a website which is builded with NextJS and i'm using Next SEO plugin for filling the meta tags necessary for twitter and facebook info...
I have card type option set to summart_large_image
<meta name="twitter:card" content="summary_large_image">
i can see that it's added to the website and it does work for some of the posts ... but something weird is happening , for example two of the tweets will have card with large image and then three of them would be just plain text with the link ...
I have a CMS in Silex where it's implemented automatic posting on twitter with twitter's API... and basicly i'm just posting a string with the link and some additional comment about it ... when i try do debugg with the twitter card validator it does work properly but not on my account ...
here's a screenshot for better explanation, the red ones are cards with large image and the blue ones have only text with link
All the posts have the same structure and equal size provided for the og:image tag.... all of them are equal basicly
Edit:
This is the twitter account in question for more clarity : https://twitter.com/someecards
Edit:
Now i even got a summary card with small image on a post which contains meta tag "summary_large_image" , and when i run the same link throught the link validator i'm getting the desired result
Link validator:
It looks like sometimes Twitter is not able to build the Card Preview (maybe a timeout when fetching the data or image) and, after that, the link is never accessed again, hence the preview is not rebuilt.
You can validate the preview with the Twitter Card Validation tool but it will probably work and show the correct link.
I have explained how the Card Preview works and limitation in a blog post, and created a tool to work around it.
In your case I would make sure the page is built before you post it onto Twitter, to make sure it is ready and served with minimum delay when the Twitter bot access it to generate the preview.
I am writing codes to share the page of my website into the facebook. I have used meta tags for open graphs. Previously, the images of the pages were stored in the server itself and I used to supply the link to that image in the meta tag as:
<meta
key="og:image"
property="og:image"
content={coverImage} // link to the image
>
While sharing on facebook, everything worked fine. The image was displayed properly along with title and descriptions.
Recently, I have changed the image store to amazon s3 instead of storing it in server. Now, the coverImage has the link of S3. I supply this link in open graph image tag but the facebook is not previewing the image. I clear the cache, scraped the url again, but the facebook shows the warning:
"Provided og:image, https://***.s3.ap-south-1.amazonaws.com/......*.jpg could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings."
This image is being previewed everywhere else and I have used ContentType :'image/jpeg', ContentEncoding: 'base64',. I am not really sure why this is being blocked in facebook.
I would be very grateful if anyone could help me resolve this thing.
Thanks in advance.
So, I added the S3 base URL to the App Domain section on "Facebook Developer Console" and it started working.
I am setting up a simple app to save links of interesting articles. I'd like to be able to retrieve the description of the meta tag from the website of the URL or at least the first headline or text that appears in the page that is accessed when accessing that URL, to display this next to the URL:
This is the app so far:
http://ux.machinas.com/mux-feed/
Is there a way to do this in angular?
I am facing a similar problem. I am getting a cross-browser script error when trying to get page info with $http.get(), ie $http.get('http://www.stackoverflow.com').
I think the best solution is to get the page info on the server, then send to the browser, ie.
$http.get('./api/getPageInfo.php?url=www.myUrl.com/whatever').then....
this thread explains how to get page info in PHP - Get Facebook meta tags with PHP