Description of issue: My card image refuses to show up no matter what I do. All the other meta tag elements like url, title and description show up in the compose tweet window and on the timeline when I post a tweet.
URL affected: Here’s the url that’s having issues: https://dasaweb.co/.
Troubleshooting steps attempted: I’ve done all the troubleshooting recommended at Card Debugging and the image still doesn’t show up:
My metatags are formatted properly and show up when I view page
source. Curl requests output also show my meta tags.
As far as I can see, my host doesn’t block Twitter’s IP range as all
the other meta tag elements appear in the card.
The image file is accessible via the absolute path provided in the meta tag.
The Card Validator shows the following in the log:
INFO: Page fetched successfully
INFO: 17 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
I tested hosting my image file on both http and https pages just in
the event that contributes to the error in some way.
The image conforms to the size guidelines. It’s 1200pxx600px, 2:1
aspect ratio and 336.67kb.
It seems to me like I’m doing everything right. I’m not sure what the issue is.
Related
I am having issues with indexing the images that are optimized by the Next/Image component these images are in the public folder of my Next.js app.
I haven't seen any examples where any resource/URL like below, that was generated by Next/Image component has been indexed in google image search.
This type of URL: https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100
The reason that these images are not getting indexed in google despite having the resource content-type: image/jpg in http header is because google needs to crawl the resource at the location root file/resource/URL like this: https://www.example.com/images/home/Dog-image-1.jpg
Why? If the http header has the correct content-type? Because google needs make sure that it knows the original resource because it is not sure how long the URL that is generated by Next/Image will stay, and it wants to avoid these kind of URL's or base64 in its image index to avoid 404 errors in the search engine to maintain a satisfactory UX, so it needs to crawl the image resource at it's location directly and it has to crawl it in the html code.
Now the question:
How is it possible to make google crawl the root resource/URL in my img tag when using the Next/Image component as well. If that's not possible Next/Image is not at all for e-commerce or other image dependent websites that depend on a lot of traffic from image search, even other websites would be reluctant in sharing your images via these URLs.
Anybody thinks a data-src attribute can solve this or something here https://nextjs.org/docs/api-reference/next/image#minimum-cache-ttl?
Thank You for Your time.
I did it using https://nextjs.org/docs/api-reference/next/image#unoptimized
Since Next.js 12.3.0, this prop can be assigned to all images by updating next.config.js with the following configuration:
module.exports = {
images: {
unoptimized: true,
},
}
And as a result I have regular image URL https://www.example.com/images/home/Dog-image-1.jpg
Notice in the picture that the top two records are identical except for the timings and the "Cause" on the first line is document whereas it's img on the second line. I've never seen this before where the entire page is requested twice and don't understand how "img" could be the cause for requesting the web page.
Can anyone give me an idea where to start looking for what may be causing this (I don't see anything about any images in my site that would seem to be related?)
I found it. There was an image that was dynamically loaded, and so the developer set the src as "#" which was causing it to request the web page again. I found in another answer the best way to resolve this issue is to instead set the src to "//:0". The double slash sets it to current protocol so you don't get insecure warning, and port 0 is an invalid port so it won't actually make a request.
I have added necessary meta tags for twitter cards and Cardtype is 'summary'.
when I try to tweet any URL it does not follow CARD meta tags (OGP) for the link first Time. and it just shows as it is. now when I try same link again it works fine and shows expected result.
I tried this with another websites too.. It behaves the same?
Is there any reason behind this? Why I can't see the effect of Twitter CARD for the 1st time I try any link?
The Facebook application I had in mind has users submit links from sites. I would like there to be a thumbnail of the site, similar to what happens when you post/message someone a link and a thumbnail automatically shows up. Any thoughts on how to go about doing this?
The sites you link to need to have Open Graph tags (https://developers.facebook.com/docs/opengraph/) on their pages to set the default image, description and title for this to happen. If those meta tags are not set, the first image on the page will be the default along with other generic information Facebook is able to scrape from the page.
If you want to test out a few pages and see what information they have set, use Facebook's URL lint tool (https://developers.facebook.com/tools/debug). Simply copy and paste any URL in there.
I have a filemaker database that I need to be able to link records and all associated data (including container field data) to various points placed on a large PDF image, and then make that data appear via instant web publishing when someone clicks on the marker for that area on the PDF. For example the PDF may be an image of a car, and then I would have various close up images of issues with the car and descriptions of those images as records in the database. I would then want to drop points on the base PDF image and when you clicked on those points be able to see the close up images and other data related to those images.
I'm being told this is too much for IWP because:
I need to place the markers outside filemaker via PDF annotation
Filemaker IWP can't handle the number of markers that may be necessary (it could be up to 1,000 on an E sized image.
Does anyone have a work around or explanation why this is a problem?
If I understand correctly, you would like to setup a PDF with links that will open a browser and show data related to what was clicked. Assuming that is the case, the reason this wont work is because IWP does not provide a unique URL for a unique page. For example, here on StackOverflow you can directly link to any question based on its URL:
http://stackoverflow.com/questions/3207775/ -- this question
http://stackoverflow.com/questions/4973921/ -- some other question
IWP uses Javascript and session variables to manipulate the output to the screen, so there is no way to link to a specific section of your IWP site, since the URL is always something like:
http://yoursite.com/fmi/iwp/cgi?-db=YOUR_DB-loadframes -- Product A
http://yoursite.com/fmi/iwp/cgi?-db=YOUR_DB-loadframes -- Product B
http://yoursite.com/fmi/iwp/cgi?-db=YOUR_DB-loadframes -- Product C
Because of the limited nature of IWP, you will not be able to workaround this issue. You'll need to build your own web-interface using the Custom Web Publishing Engine, either using the built-in PHP extensions or some other technology where you invoke the XML publishing API.
I agree with Nate
IWP is the wrong solution to this problem. You'd be better off simply hosting those images on a webserver.
Now here comes the plug, you can use SuperContainer to really simplify the management of the images from FileMaker.