i have
<meta property="og:image" content="{{ url('/images/logo.jpg') }}"/>
but no one social network not show my image. What the problem?
To share a dynamic image, you can't do it like that.
https://developers.facebook.com/docs/sharing/reference/feed-dialog will help you to do this using JavaScript.
Further development, like set image from database you can do it like this. It worked for me.
Related
There seems to be something odd in OG metadata in our website and I can't figure out what it is...
For example this page: https://en.ilmatieteenlaitos.fi/wind-energy.
Has og:image and og:title (there is some extra stuff, but they shouldn't matter)
<meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://images.ctfassets.net/hli0qi7fbbos/7aa7VLl18PM8amWiILgeCH/30be16653881211492963375de425d7b/Tuulivoimalat_Hamina_ilta_SariHartonen.jpg"> <meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Wind energy - Finnish Meteorological Institute">
Previews show correctly in here: https://www.opengraph.xyz/url/https%3A%2F%2Fen.ilmatieteenlaitos.fi%2Fwind-energy/
Post Inspector shows preview incorrectly just like sharing the page in Linkedin app: https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fen.ilmatieteenlaitos.fi%2Fwind-energy. Using inspector should refresh the cache, but it's not doing it.
I tested with a test page (https://cdn.fmi.fi/demos/stackoverflow/some) in different domain with same header and all worked just fine with inspector and app and everything.
Is the problem deeper in en.ilmatieteenlaitos.fi -settings since all worked fine in cdn.fmi.fi?
edit: did more testing on our beta-site so content of the page is same as in production. All worked just fine in beta-site. So my guess there is something wrong in production website's settings which is out of my comprehension. Any tips? :) We are using Contentful and AWS...
Try out this meta tags debugger tool here: https://thumbsmith.com/validator
My guess would be that maybe you need to add width / height tags for LinkedIn to pick it up
I believe the problem is oq:url. Currently it's always set to our website's mainpage. Maybe Linkedin caches stuff based on that so all shares get the same cached result. This is not the case for twitter. Not sure about other some-platforms.
I also added prefix="og: https://ogp.me/ns# to html-element's attributes. Not sure how much difference this makes.
Now Linkedin shares seem to work in our preproduction site which uses same data as production.
I am facing a problem with the site published using GitHub. The images are not getting displayed when I publish the site. However, it is displayed on my local computer.
The images are present in the img folder.
I am not able to get where is the problem occurring and how to resolve it.
github repo link: https://github.com/Scientist69/Gym-Webpage
GitHub deployment link: https://scientist69.github.io/Gym-Webpage/
try removing the first slash(/) in image links in index.html.
<img src="/img/bg.webp" alt="" />
To
<img src="img/bg.webp" alt="" />
I am beginner in Django web development & currently I am using using bootstrap4 by loading bootstrap.min.css & bootstrap.min.js as below in html files.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Recently I have found that there been module in Django named django-bootstrap4 & I am reading its documentation also.
https://django-bootstrap4.readthedocs.io/
I have tried to find difference between those but not found any.
Which will be suitable to use in web development?
Tried to find answer on google but not found any so please can someone explain me difference between these two?
The Bootstrap itself is an independent CSS framework that you can use to build your UI no matter the application framework. But django-bootstrap4 is basically a helper library to seamlessly integrate Bootstrap with your Django project UI.
For example consider you want to use alert component in Bootstrap. After adding bootstrap.min.css & bootstrap.min.js to your template, every time you want to show the alert you should add code like this:
<div class="alert alert-danger" role="alert">
Something went wrong
</div>
But with django-bootstrap4 you can simply use {% load bootstrap4 %} in your template and then there in no need to writing all the tags and classes.
{% bootstrap_alert "Something went wrong" alert_type='error' %}
So they are basically is the same but the later is cleaner and more maintainable.
I have a problem with ember-cli build option.
While running server by ember s it's showing normal page with content, styles etc.
But now I want to build this app and put it on my website by ftp so i tried ember build which build my project into /disk folder but the index.html file doesn't contain the stuff from application.hbs + no styles from styles/app.css.
I'm new to ember. What am I doing wrong? Docs of ember are saying nothing about this.
All of your app is actually pulled in through external assets.
So, looking at your pre-built index.html, you'll see something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>emberclear</title>
{{content-for "head"}}
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/emberclear.css">
{{content-for "head-footer"}}
</head>
<body class='has-navbar-fixed-top'>
{{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/emberclear.js"></script>
{{content-for "body-footer"}}
</body>
</html>
my application is https://emberclear.io, named emberclear, so substitute your app name where applicable.
In the head, we see two link tags.
the first link is for all the styles that your addons may include (maybe such as material-ui, or bootstrap, or bulma).
The second link is your actual app styles. for me, emberclear.css includes everything from app.css, and all of its dependencies (I'm actually using scss, so I can include stuff via scss' #import).
Down in the body we see two script tags.
vendor.js will contain ember itself, and any addon dependencies that need to be included at run time, such as ember-paper's library of components.
emberclear.js includes your app -- routes, templates, etc.
This technique is common for all single page apps, and isn't exclusive to ember. anything built with react, or vue, has a similar pattern.
If you're wanting to have html and css be a part of your index.html, fastboot (https://www.ember-fastboot.com/) + prember (pre-rendered ember: https://github.com/ef4/prember ) may be of interest to you.
Hope this helps! :)
If something is wrong, feel free to copy your built index.html from dist (and maybe additional files as well).
Some follow up questions for you, depending on the issues you are running in to:
Are you getting any errors?
What happens when you try to open the dist/index.html file locally?
You're uploading the contents of dist to an ftp folder. This in-of-itself is fine, but has the web-sever been told to use that ftp folder for a website?
How are you attempting to access the ftp folder via browser?
Maybe there is a domain/path we could look at to see additional details?
I have the problem. There is two identical sites: production and test one.
I'm placing in head
<meta
property="og:image"
content="http://{{ site.domain }}{{ MEDIA_URL }}{{ post.preview.image }}"
>
And that image showing on facebook share page https://www.facebook.com/sharer/sharer.php with test site's link, but now showing with prodiction's one. The sites are fully identical except servers. Production is placing in Hetzner dedicated server, test server on DigitalOcean VPS.
The problem disappears after debugging the link in facebook object debugger https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Finvestcafe.ru%2Fblogs%2F05525565%2Fposts%2F38607. After debugging image shows excellent.
Any ideas? This problem makes me angry >_<
Facebook will cache the shared site. After running debugger, it will refreshed it's cache