Google Plus lists all your +1s with a small preview of the webpage that was +1ed. Techcrunch and Mashable's previews come up as the first sentence of the article, however for me it just takes the first HTML on the page (which in my case is navigation). How can I get it to target the article for this preview rather than the navigation?
I have looked through the API and couldnt find anything that would do what I'm talking about.
Well, you have three options to avoid G+ trying a best guess.
1) (prefered) Mark up your site with microdata. Please refer to http://schema.org and possibly the Google Webmaster Tools help section on microdata and the Opera Developer resources.
It will look something like:
<body itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article Title</h1> <!-- snippet title -->
<img itemprop="image" src="image-url"></img> <!-- the snippet icon -->
<p itemprop="description">Snippet text.</p>
</body>
The idea is to mark up the parts that you already uses as base for your snippet. Yahoo, MS Bing, Google and a few other search engines will try to honour this for their search snippets as well, as well as future browser versions, e.g. for bookmarks.
2) Use the facebook Open Graph protocol (which is not valid html, but makes your snippets compatible with facebook "shares").
It will look like (put this in your section)
<meta property="og:title" content="Your snippet title"/>
<meta property="og:image" content="url://of-your-snippet-image.jpeg"/>
<meta property="og:description" content="Your snippet text goes here"/>
3) Set the title and description meta tags.
<meta name="title" content="Your snippet title" />
<meta name="description" content="Your snippet text goes here">
Google finally released how to do it. http://developers.google.com/+/plugins/+1button/#plus-snippet
You need to use itemprop tags to tell +1 what you want to use.
There's many ways to go about it:
You can add the following tags to your opening HTML declaration:
<html itemscope itemtype="http://schema.org/Article">
and then add the following meta descriptors:
<meta itemprop="name" content="Your article's title" />
<meta itemprop="description" content="Your article's description or excerpt" />
and finally add this to the image you want to use:
<img itemprop="image" src="image.jpg" />
Related
I've got a NextJS app where users can share links to Reddit and the link preview in Reddit should show a different thumbnail based on the shared link. It works perfectly sharing to Slack or FB, but it always shows the exact same image on Reddit regardless of the link shared.
As you can see below, it should be sharing a different image based on the trade.id. However, on Reddit it always only shows the image for trade.id == 2 (this was the first one I shared for testing). I've tried using different accounts, but still the same problem.
const TradePage: React.FC<Props> = ({ trade }) => {
return (
<div>
<Head>
<meta
property='og:url'
content={`https://${URL}/trades/${trade.id}`}
/>
<meta
property='og:image'
content={`https://${URL}/images/Thumbnail${trade.id}.png`}
/>
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='901' />
<meta
property='og:title'
content={`Verified ${trade.ticker} Trade`}
/>
<meta
property='og:image:alt'
content={`Verified ${trade.ticker} Trade`}
/>
<meta property='og:image:type' content='image/png' />
</Head>
<TradeComponent trade={trade} />
</div>
);
Reddit caches the OG image on the first request, as do a few other services like Twitter.
Twitter offers an OG testing tool to bust the cache - Reddit does not offer such a tool.
Unfortunately, your OG image is cached on Reddit for as long as they want to cache it or until they release a tool. However, it's been like this for a few years, and it doesn't look high on their priority.
A workaround is to change the URL for the page. For example, adding a trailing slash, query param, or renaming the route.
I am working on a project when the html.index file has the meta data. I.e. as follows:
<meta
property = "og: description"
content = "This is my web."
/>
Then when I post a link on WhatsApp or Slack I can see the description I wrote or more correctly the "slogan of the site".
How can I change the description when on the example page on the page "My projects" When I send the link in the description will be written "My projects".
Plus, I tried using React Helemnt but it does not work for me
<Helmet>
<title>{web.title}</title>
<description>My projects</description>
</Helmet>
Where am I wrong and what am I missing?
Source code
I just want to change some stuff like add a picture, change the colour of the blue strip, add some body text, etc.
Use these meta tags inside your index.html file <head> tags. You have used the og:title tag, use the other two.
<meta property="og:title" content="Write your desired title">
<meta property="og:description" content="Write the body text here">
<meta property="og:image" content="https://hypixelfarms.github.io/images/1.jpeg">
These are for social sharing which use the og property, unlike Search Engines.For more information visit this page of Css-Tricks.
Here's some Python code that will do what you're asking for. For color, set the variable to the hex code of any color you would like, and replace the # with 0x. I have provided an example one that sets it to green. You can get the color code from here.
#bot.command()
async def test(ctx):
embed = discord.Embed(
title="Farms and More",
url="https://hypixelfarms.github.io/",
description="body text",
color=0x4ef207
)
embed.set_thumbnail(url="") # enter the URL location of the picture to use for the embed picture
await ctx.send(embed=embed)
Go to this website for more detailed information on embed features.
I'm asking this because I have not been able to find the answer anywhere.
I am using Roundcube to build a web mail application. Roundcube has custom XHTML-tags that can be used to display things, together with normal HTML. These XHTML-tags can have an attribute "condition" which, if I understand correctly, will only display the element if the condition is fullfilled. Examples:
<roundcube:if condition="var < 0" />
<div> ... </div>
<roundcube:elseif condition="var > 0" />
<span> ... </span>
<roundcube:else />
<p> ... </p>
<roundcube:endif />
<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />
My problem is that I would like to change the condition dewpending on the screen/viewport width. Basically depending on if the user is usnig mobile, tablet or desktop. What I want to do is show a div if the user is on mobile or tablet, but not on desktop, or the other way around.
I have not been able to find this in any way. Is there someone who knows hos this can be achieved?
I'm not a goto person for Roundcube, so maybe someone else can help you find a Roundcube #media conditional tag.
As an alternative though, have you considered solving this with off-the-shelf HTML and CSS?
HTML
<div class="container-desktop">
<!-- desktop content -->
</div>
<div class="container-mobile">
<!-- mobile content -->
</div>
CSS
<head>
<meta charset="utf-8">
<title>...</title>
<style type="text/css">
/* mobile first ==> by default show mobile view */
.container-desktop{display: none;}
/* show desktop view for viewports above 480px, adjust as required */
#media only screen and (min-width: 481px){
.container-desktop{display: block;}
.container-mobile{display: none;}
}
</style>
</head>
Hope this helps!
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.