How can i remove meta tags in Oxwall software or any software. The Oxwall core loads on auto wrong Facebook meta tags.
Wrong value (generated by Oxwall):
<meta name="og:type" content="website" />
Correct value:
<meta property="og:type" content="website" />
Thanks in Advance
You can include the following line to your base or plugin init.php file. If you are not working with a plugin open /ow_system_plugins/base/init.php and add the following code:
function modify_custom_meta_property(){
OW::getDocument()->addMetaInfo('og:type', 'website', 'property');
}
OW::getEventManager()->bind(OW_EventManager::ON_BEFORE_DOCUMENT_RENDER, 'modify_custom_meta_property');
Finaly i find solution.
You have to do like this:
Go to ow_system_plugins/base/classes/event_handler.php and end of the file remove or out comment all the lines where it add wrong facebook meta:
Example:
// $document->addMetaInfo("og:type", "website");
Go to /ow_system_plugins/base/init.php and at top of file add code like this:
function modify_custom_meta_property(){
OW::getDocument()->addMetaInfo('og:type', 'website', 'property');
OW::getDocument()->addMetaInfo('og:title', 'Your awsome title here', 'property');
}
OW::getEventManager()->bind(OW_EventManager::ON_BEFORE_DOCUMENT_RENDER, 'modify_custom_meta_property');
Clear your website cache and look the source code of your page, now correct metas should bee added and the wrong metas gone.
Related
I use plyr player on my page. Basically the only code that is on the page is this:
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
Everything works fine. Just when I send such link to someone over messenger / whatsapp they see the code in the preview I use a custom made CMS similar to WordPress where I added the plyr script code in the post body in the HTML code.
NOTE I am not able to edit nor modify head in html, only div class="container" in the html body. See the url https://zz.zustatzdravy.cz/skryte/90-test-a.html . The url might work in the future.
I am not using WP but something like WP. It is custom made it has got no plugins. I can use custom css
is there any way I can hide the code from the preview?
UPDATE: Facebook sharing debbuger shows what I mean
I think adding open graph / meta description will work. For more information check out https://ogp.me/
In the code replace all instances of {{TITLE TO SHOW IN PREVIEW}} and {{DESCRIPTION TO SHOW IN PREVIEW}}.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{TITLE TO SHOW IN PREVIEW}}</title>
<meta name="title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta name="description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="video.other">
<meta property="og:title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta property="og:description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
</head>
<body>
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
</body>
</html>
Additionally I recommend adding the following below the og:description meta tag.
<meta property="og:url" content="{{ URL OF PAGE }}" />
<meta property="og:image" content="{{ PREVIEW IMAGE }}">
{{ URL OF PAGE }} in this instance being the current URL... so if the url is https://example.com/thevideo then content for og:url would be https://example.com/thevideo
{{ PREVIEW IMAGE }} an optional image file to show as a preview. This is the full url with domain e.g. https://example.com/img/preview.jpg
You can use the Facebook Sharing Debugger tool to test.
You mentioned you're using a CMS. You might need to find a plugin which modifies the meta header tags. In WP you can use something like Yoast SEO.
Update based on only being able to update the body: Looks like in your specific situation the CMS is already adding the og:title and og:description. The og:title is the page title, and the description is a snippet of the text on the page.
Using the open graph tags is really this only way you can modify the title, description and image that appears in the preview of the message. Therefore the ideal situation would be dependent on the CMS you're using.
Solution 1: Move the javascript to a file.
The following code isn't added to to the description:
<script src='https://data1.azami.cz/124141/users/plyr/plyr.min.js'></script>
Therefore if you can create another javascript file with the const player = new player... code then you could also include with a tag similar to this:
<script src='https://data1.azami.cz/124141/users/plyr/a_new_file_with_script.js'></script>
With the solution 1. The description should now be empty.
Solution 2: Prepend a description to the body
If you can't create a new file on the server for some reason, and you can really just modify the body, then for now the only thing I can think of is a little hack around it which would add a new description but might not remove the javascript code from the description. Unless maybe if this new description is longer than 300 characters.
The hack is adding something like the code below before including the script tags for the video. It description would be hidden when viewing the website but prepended the the description tag.
<div style="display: none">Here you can put a description of a video. Or a general description for the website. It will be displayed as the description when sharing via messenger. Maybe if you make this 300 characters or longer, then the script won't show up in the description. This text including this note is 300 characters.</div>
I've added meta tags to show summary_large_image box for twitter share. Once the twitter share window pops up, it looks like this:
Once I clicked Tweet, the summary_large_image can be displayed correctly with no problem. Here is the meta code:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="patch-package is like a bandage. It saved my life!!!" />
<meta name="twitter:image" content="https://image.mux.com/d4OkE5whZfyg1VJogOTf8AAHcMG00ak24h6JQYWNo/thumbnail.png?width=700&height=400" />
<meta name="twitter:site" content="#lonelydotdev" />
<meta name="twitter:title" content="react-video-recorder works in firefox now!!!" />
But what I really want to see in the share window is something like following, where it not only has the url link, but has some text description, as well as via #username in the end:
How can I automatically inject the description and site owner to the share textarea? Thanks!
I am using react-share npm package. It has via, related, title such parameters that I can use to inject those text.
https://www.npmjs.com/package/react-share
I am trying to set og-image to CRA app and I am doing like this:
<meta content="website" property="og:type" />
<meta content="%PUBLIC_URL%/og-image.png" property="og:image" />
<meta content="Tile goes here..." property="og:title" />
An image is inside pubic folder, but the image does not show on op.
When I do http://localhost:3000/og-images.png, it works. However, I do not want to set fixed value here.
What I am doing wrong?
Edit: my folder structure:
app
- public
- index.html
- favicon.ico
- og-image.png
- src
This can be solved by having a sever.js serving the bundle and static files which will allow you to add dynamic meta tags to your ReactJS App.
You can find a detail explanation on how to do that here in this post:
https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/
Hope this still helps anyone out there
For example, if I have the following code:
<head>
<meta name="description" content="Question">
<meta name="keywords" content="StackExchange, Webmasters">
<meta name="author" content="Jon Doe">
</head>
I need the following to be displayed somewhere on the webpage:
Description: Question
Keywords: StackExchange, Webmasters
Author: Jon Doe
How could I achieve this?
In PHP, you would first grab the Meta information with get_meta_tags() as an array and echo the different meta tags to wherever you want them to be displayed on your page.
For example:
$metastealer = get_meta_tags('http://yourdomain.com');
echo $metastealer['description'];
echo $metastealer['keywords'];
echo $metastealer['author'];
More information here, here and if something doesn't quite work right probably here.
Probably not what you want, but you could of course display the attribute values of the actual meta elements with CSS:
head, meta {display:block;}
meta[name="description"]::after {content:"Description: " attr(content);}
Only advisable if you need a simple/quick way to display it for your own site owner’s need. Don’t use this method if you want the content to be accessible to your visitors. In that case you should repeat the content and mark it up accordingly.
I have an error what I can't understood why with facebook meta...
This is the page: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmikrobusz-berles.com%2Fhir%2Fkedvezmenyek%2F2012-12-05%2Fteli_mikrobusz_berles_kedvezmenyesen_utazasi_iridaknak.html
This is my facebook meta.
<meta property="og:title" content="Téli mikrobusz bérlés kedvezményesen utazási iridáknak"/>
<meta property="og:image" content="http://mikrobusz-berles.com/upload/images/m1.png"/>
<meta property="og:site_name" content="mikrobusz-berles.com"/>
<meta property="og:description" content="<p>
A kedvezmény időtartama: 2012. Nov. 1-től 2013. Márc. 1-ig.<br />
<br />
Síutakat szervező utazási irodák jelentkezését várjuk partneri együttműködés céljából. A weboldalunkon feltüntetett áraknál is kedvezményesebb bérlési lehetpséget kínálunk, további részletekér vegye fel velünk a kapcsolatot!</p>
"/>
It's included between HEAD HEAD tags.. But facebook says :
Meta Tags
In Body: You have tags ouside of your . This is either because your
was malformed and they fell lower in the parse tree, or you
accidentally put your Open Graph tags in the wrong place. Either way
you need to fix it before the tags are usable.
What should I do? What's wrong?
the metatags should be on the <head> part of your site
apparently you don't have one
you can see what facebook sees on your site here
edit:
after looking in your page's source code - you don't have an opening <html> tag (right in the beginning of the page - after the DOCTYPE decleration
moreover - you have some junk printed in the start of the page, try removing it