This is an example when someone posts a link on discord it appears with this box and has some text on it. How do I add this to my website? Embed
You need to use open graph meta tag properties. See Facebook's developer guidelines for examples.
https://developers.facebook.com/docs/sharing/webmasters#markup
Related
Our site is trying to be as WCAG compliant as possible, but we are challenged when trying to embed Tweets and Instagrams.
The embed code looks like <blockquote>....</blockquote> but renders on the fly to <iframe></iframe>
Since we have no control over the rendered view, the iframe doesn't have a title for example.
Is there a way or an recommendation to put something in a surrounding <div> that can at least warn the screen reader or other tools that an iframe is happening on an external site.
I tried using aria="section" label="External Website in Iframe" for example, but I don't know if that gets used by the tools and if it's effective enough.
Thanks
I would add a title on all iframes on the fly, with Javascript - if I would have the correct title. Or make a plugin (wrapper) so that when author pastes the URL of a tweet she must also write the title and then make Javascript to add title attribute to the iframe.
Maybe worth trying?
I always wonder how pages like this works on link preview structure. specifically "Infobox Section"? (here) this section appears top of the content but always excluded from link previews.
How can we exclude one HTML section from link preview?
You can't exclude any content from being visible to another website; your DOM is always publicly visible. Rich Preview just shows the <meta> information for a website for use on sites like Google and Facebook. If you don't want information to show on Rich Preview, simply don't include the relevant information in your <meta> tags.
In other words, if there are pages out on the web with anchor tags saying, for example:
Interesting photo
Can I search for "this_page.html" and find pages that link to that page on my site? I seem to be able to search only for "Interesting photo", the shown text in the link.
Thanks for any insight.
You can make the following google search: www.mysite.com/this_page.html -site:www.mysite.com To find webpages there links to your website -site:www.mysite.com exclude your own website.
You can use a "backlink-checker"
for the main site, but it won't reference
individual pages (free versions anyway, paid version will have different feature sets).
Everytime I share a link on facebook from my site, http://reviewsie.com, the twitter thumbnail is selected as the image thumbnail. (This also happens in pinterest and some of my ad tools.) How do I make a certain image stand out and get selected correctly?
You need to set this meta tag in your head
<meta property="og:image" content="http://yourdomain.com/image.jpg"/>
you need to use the Open Graph Protocol.
To check how Facebook sees your page, use the URL Checker tool at:
https://developers.facebook.com/tools/debug
for your own example, check the tool with your url
and you can find that you are not using the OGP and for such, it simply randomly selects one picture.
and it reminds you about it:
Inferred Property: The og:image property should be explicitly provided, even if a value can be inferred from other tags
If it's still showing old thumbnail, you need to refresh it on https://developers.facebook.com/tools/debug/
Enter your web site link and debug. After that you'll see 'Scare again' button there.
How create in my webpage a share link(Facebook) of youtube video but change the title and description
Thanks
Try to look up at Feed Dialog
that using by FB.ui Javascript SDK
To change the feed story of a shared page, you have to update the open graph tags. See the documentation here.