Improve main picture on website for use in social media
Hi all, Could the website offer a nice main image for usage in social media? If you share a link to http://fosdem.org/2016 on Twitter, LinkedIn, Facebook, Google+ and so on, the map of the campus is being shown as image, which is not the most representable image for the event. It is possible to indicate in the website (hidden or not) which picture/logo should be picked up by social media when sharing the link of the site. Could someone have a go at improving this? Thanks, Pander
On 22/12/2015 14:17, Pander wrote:
Hi all,
Could the website offer a nice main image for usage in social media? If you share a link to http://fosdem.org/2016 on Twitter, LinkedIn, Facebook, Google+ and so on, the map of the campus is being shown as image, which is not the most representable image for the event.
It is possible to indicate in the website (hidden or not) which picture/logo should be picked up by social media when sharing the link of the site. Could someone have a go at improving this?
Thanks,
Pander
Anyone suggestions how this should look like in the webcode? (not sure how different social media pick up stuff from your website as being the "banner or logo" in preview ...). So I can pass this info on to the website guys? Regards, G.
At the slight risk of posting a bit too often in these threads - I know of 2 social integrations which allow pictures and one crawler-y piece of metadata: Facebook OpenGraph tags (just pasted from an app I contributed to, or for some more info there seems to be a reasonable blog post http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open... ): <!-- Open Graph tags for Facebook --> <meta property="og:title" content="Directory of Open Access Journals"/> <meta property="og:url" content="https://doaj.org" /> <meta property="og:description" content="DOAJ is an online directory that indexes and provides access to quality open access, peer-reviewed journals."/> <meta property="og:image" content=" https://doaj.org/static/doaj/images/logo_square.jpg"/> Twitter cards with a picture ( https://dev.twitter.com/cards/types/summary-large-image ): <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <meta name="twitter:image" content=" http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-s... "> DublinCore (DC) metadata - incidentally that seems to already be there on pages, incl. FOSDEM homepage: <link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" /> <meta name="DC.Title" content="Welcome to FOSDEM 2016"/> <meta name="DC.Format" content="text/html" /> <meta name="DC.Language" content="en" /> <meta name="DC.Subject" content="FOSDEM 2016" /> <meta name="DC.Rights" content=" http://creativecommons.org/licenses/by-sa/2.0/be/" /> hth, Emanuil On 22 December 2015 at 14:16, Ghosty <ghosty.be@gmail.com> wrote:
On 22/12/2015 14:17, Pander wrote:
Hi all,
Could the website offer a nice main image for usage in social media? If you share a link to http://fosdem.org/2016 on Twitter, LinkedIn, Facebook, Google+ and so on, the map of the campus is being shown as image, which is not the most representable image for the event.
It is possible to indicate in the website (hidden or not) which picture/logo should be picked up by social media when sharing the link of the site. Could someone have a go at improving this?
Thanks,
Pander
Anyone suggestions how this should look like in the webcode? (not sure how different social media pick up stuff from your website as being the "banner or logo" in preview ...). So I can pass this info on to the website guys?
Regards,
G.
_______________________________________________ FOSDEM mailing list FOSDEM@lists.fosdem.org https://lists.fosdem.org/listinfo/fosdem
ok added the opengraph tags ... looks like that's working now. Now lets see for the twitterstuff ;) Regards, G On 22/12/2015 15:55, Emanuil Tolev wrote:
At the slight risk of posting a bit too often in these threads - I know of 2 social integrations which allow pictures and one crawler-y piece of metadata:
Facebook OpenGraph tags (just pasted from an app I contributed to, or for some more info there seems to be a reasonable blog post http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open... ):
<!-- Open Graph tags for Facebook --> <meta property="og:title" content="Directory of Open Access Journals"/> <meta property="og:url" content="https://doaj.org" /> <meta property="og:description" content="DOAJ is an online directory that indexes and provides access to quality open access, peer-reviewed journals."/> <meta property="og:image" content="https://doaj.org/static/doaj/images/logo_square.jpg"/>
Twitter cards with a picture ( https://dev.twitter.com/cards/types/summary-large-image ):
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
DublinCore (DC) metadata - incidentally that seems to already be there on pages, incl. FOSDEM homepage:
<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" /> <meta name="DC.Title" content="Welcome to FOSDEM 2016"/> <meta name="DC.Format" content="text/html" /> <meta name="DC.Language" content="en" /> <meta name="DC.Subject" content="FOSDEM 2016" /> <meta name="DC.Rights" content="http://creativecommons.org/licenses/by-sa/2.0/be/" />
hth, Emanuil
On 22 December 2015 at 14:16, Ghosty <ghosty.be@gmail.com <mailto:ghosty.be@gmail.com>> wrote:
On 22/12/2015 14:17, Pander wrote:
Hi all,
Could the website offer a nice main image for usage in social media? If you share a link to http://fosdem.org/2016 on Twitter, LinkedIn, Facebook, Google+ and so on, the map of the campus is being shown as image, which is not the most representable image for the event.
It is possible to indicate in the website (hidden or not) which picture/logo should be picked up by social media when sharing the link of the site. Could someone have a go at improving this?
Thanks,
Pander
Anyone suggestions how this should look like in the webcode? (not sure how different social media pick up stuff from your website as being the "banner or logo" in preview ...). So I can pass this info on to the website guys?
Regards,
G.
_______________________________________________ FOSDEM mailing list FOSDEM@lists.fosdem.org <mailto:FOSDEM@lists.fosdem.org> https://lists.fosdem.org/listinfo/fosdem
meanwhile a friend of mine gave me some more info, to be complete for facebook and google+, you could add: <meta property="og:site_name" content="FOSDEM 2016" /> <meta property="og:title" content="FOSDEM 2016" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://fosdem.org/2016/assets/style/logo-gear-7204a6874eb0128932db10ff40309..." /> <meta property="og:description" content="FOSDEM is a free event for software developers to meet, share ideas and collaborate." /> or something more appropriate, for example the image used may be bigger On 12/23/2015 01:37 AM, Ghosty wrote:
ok added the opengraph tags ... looks like that's working now. Now lets see for the twitterstuff ;)
Regards,
G
On 22/12/2015 15:55, Emanuil Tolev wrote:
At the slight risk of posting a bit too often in these threads - I know of 2 social integrations which allow pictures and one crawler-y piece of metadata:
Facebook OpenGraph tags (just pasted from an app I contributed to, or for some more info there seems to be a reasonable blog post http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open...
):
<!-- Open Graph tags for Facebook --> <meta property="og:title" content="Directory of Open Access Journals"/> <meta property="og:url" content="https://doaj.org" /> <meta property="og:description" content="DOAJ is an online directory that indexes and provides access to quality open access, peer-reviewed journals."/> <meta property="og:image" content="https://doaj.org/static/doaj/images/logo_square.jpg"/>
Twitter cards with a picture ( https://dev.twitter.com/cards/types/summary-large-image ):
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
DublinCore (DC) metadata - incidentally that seems to already be there on pages, incl. FOSDEM homepage:
<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" /> <meta name="DC.Title" content="Welcome to FOSDEM 2016"/> <meta name="DC.Format" content="text/html" /> <meta name="DC.Language" content="en" /> <meta name="DC.Subject" content="FOSDEM 2016" /> <meta name="DC.Rights" content="http://creativecommons.org/licenses/by-sa/2.0/be/" />
hth, Emanuil
On 22 December 2015 at 14:16, Ghosty <ghosty.be@gmail.com <mailto:ghosty.be@gmail.com>> wrote:
On 22/12/2015 14:17, Pander wrote:
Hi all,
Could the website offer a nice main image for usage in social media? If you share a link to http://fosdem.org/2016 on Twitter, LinkedIn, Facebook, Google+ and so on, the map of the campus is being shown as image, which is not the most representable image for the event.
It is possible to indicate in the website (hidden or not) which picture/logo should be picked up by social media when sharing the link of the site. Could someone have a go at improving this?
Thanks,
Pander
Anyone suggestions how this should look like in the webcode? (not sure how different social media pick up stuff from your website as being the "banner or logo" in preview ...). So I can pass this info on to the website guys?
Regards,
G.
_______________________________________________ FOSDEM mailing list FOSDEM@lists.fosdem.org <mailto:FOSDEM@lists.fosdem.org> https://lists.fosdem.org/listinfo/fosdem
_______________________________________________ FOSDEM mailing list FOSDEM@lists.fosdem.org https://lists.fosdem.org/listinfo/fosdem
participants (3)
-
Emanuil Tolev -
Ghosty -
Pander